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 に答える