0

我正在尝试在弹出表单中创建一个时间选择器。我正在与事件委托作斗争——我能够让时间选择器在表格之外工作，但不能在表格内部工作。

我当前的代码，没有时间选择器弹出：

 $(document).ready(function() {
   $('#timepick').timepicker({
     showPeriod: true,
     showLeadingZero: true
   });
 });

$(function() {
    $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Add Time": function() {
                    $( "#time-table tbody" ).append( "<tr>" +
                        "<td>" + time.value + "</td>" + 
                    "</tr>" ); 
                    $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
    });

    $("#add-time").button().click(function() {
            $( "#dialog-form" ).dialog( "open" );
    });
});

这在弹出框内不起作用，仅适用于其中的#timepick。我知道我需要以某种方式使用 .on() jquery 函数。

        $(document).ready(function() {
            $('#timepick').on("click", function(){
                timepicker({
                showPeriod: true,
                showLeadingZero: true
            });
        });

也没有工作。

当前试用的粘贴箱：

http://pastebin.com/gta7TD47

编辑：

所以这最有效：

        $(document).ready(function() {
          $('#dialog-form').on('click','#time',function() {
            $('#time').timepicker({
                showPeriod: true,
                showLeadingZero: true
            });
          });
        });

唯一的问题是，它目前需要您单击该框，然后添加事件处理程序，然后单击关闭并重新单击 - 因此在工作之前需要单击。我如何让它立即开火？不知何故使用.trigger()？

4

2 回答 2

1

你没有委派任何事情。您只是将事件直接绑定在 timepick 元素上。
如果你想委托一个事件，你需要一个额外的选择器：

$('body').on('click','.allElementsYouNeedSelector',function(){});

上面的代码将应用匿名回调函数作为事件处理程序，用于在标记中任何位置具有该类的任何元素上触发的所有点击事件。 因此，如果您想委托，请说出您的元素：allElementsYouNeedSelector$('body')
dialog-form

$('#dialog-form').on('click','*',function()
{//will be called when any child of the #dialog-form is clicked
});

请注意，如果您使用这样的方法，它会在on内部转换为方法。delegate

更新：
鉴于您的更新，我必须说：为具有唯一 ID 的元素委托事件完全没有意义。也许你可以试试这个：

$('#time').on('click',{showPeriod: true,showLeadingZero: true},timepicker);

这会将单击侦听器绑定到#time元素，并将该timepicker方法作为事件处理程序应用，将对象文字{showPeriod: true,showLeadingZero: true}作为参数传递，就像您正在做的那样。当然，您可以使用委托来做同样的事情：

$('#dialog-form').on('click','*',function()
{//regardles of which child was clicked, apply the timepicker method to #time
    $.timepicker.apply($('#time'),[{showPeriod: true,showLeadingZero: true}]);
});

和以往一样，为了避免每次调用都扫描 DOM，您可以添加一个闭包

$('#dialog-form').on('click','*',(function(time)
{
    return function()
    {
        time = time || $('#time');//in case $('#time') didn't exist when function was created
        $.timepicker.apply(time,[{showPeriod: true,showLeadingZero: true}]);
    };
}($('#time')));
于 2012-11-29T06:15:13.137 回答
1

试试这个，

$(document).ready(function()
{

$( "#dialog-form" ).dialog({

            autoOpen: false,

            height: 300,

            width: 350,

            modal: true,

            buttons: {

                "Add Time": function() {

                        $( "#time-table tbody" ).append( "<tr>" +

                            "<td>" + time.value + "</td>" + 

                        "</tr>" ); 

                        $( this ).dialog( "close" );

                },

                Cancel: function() {

                    $( this ).dialog( "close" );

                }

            }

        });



        $("#add-time").click(function() { //don't use buttun() here

                $( "#dialog-form" ).dialog( "open" );

        });




         $('#time').timepicker({ //use the correct id attr of text field
                });

});//end of document

/////HTML部分/////

<div id="dialog-form" title="Create new user">

    <p class="validateTips">All form fields are required.</p>



    <form>

    <fieldset>

        <label for="time">Time</label>

        <input type="text" id="time" name="time" style="width: 70px;" id="timepick" value="01:30 PM" />

    </fieldset>

    </form>

</div>


 <button id="add-time">Add time</button>

希望这可以帮助

于 2012-11-29T06:40:48.127 回答