4

ajaxを介してコンテンツを更新すると、日付ピッカーが失われることを除いて、私にとってはうまく機能するjQuery日付ピッカーがあります。私が言えることから、jQueryon()を使用して入力にバインドする必要がありますが、バインドする適切なイベントが見つからないようです。

最初は機能しますが、その後の更新では機能しません:

$("[id^=startPicker]").datetimepicker({
        showOn: "button",
        buttonImage: "/img/calendar_icon.png",
        buttonImageOnly: true,
        dateFormat: 'mm/dd/yy',
        timeFormat: 'hh:mm tt',
        stepMinute: 1,
        onClose: function (dateText, inst) {

            var selectedDate = $(this).datepicker("getDate"); //Date object

            $.ajax({
                url: "/url",
                dataType: "json",
                method: 'post',
                data: {
                    value: selectedDate.toDateString() + ' ' + selectedDate.toTimeString()
                },
                beforeSend: function () {
                    $("#loading").fadeIn();
                },
                success: function (data, textStatus) {
                    $("#content").html(data);
                },
                complete: function () {
                    $("#loading").fadeOut();
                }
            });
        }
    });

初回またはその後の更新ではバインドしません:

$('#content').on('ready', "[id^=startPicker]", function () {
        $(this).datetimepicker({
            showOn: "button",
            buttonImage: "/img/calendar_icon.png",
            buttonImageOnly: true,
            dateFormat: 'mm/dd/yy',
            timeFormat: 'hh:mm tt',
            stepMinute: 1,
            onClose: function (dateText, inst) {
    
                var selectedDate = $(this).datepicker("getDate"); //Date object
    
                $.ajax({
                    url: "/url",
                    dataType: "json",
                    method: 'post',
                    data: {
                        value: selectedDate.toDateString() + ' ' + selectedDate.toTimeString()
                    },
                    beforeSend: function () {
                        $("#loading").fadeIn();
                    },
                    success: function (data, textStatus) {
                        $("#content").html(data);
                    },
                    complete: function () {
                        $("#loading").fadeOut();
                    }
                });
            }
        });
    });
4

4 に答える 4

6

jQuery.on()関数は遅延イベント処理用ですが、プラグインの初期化には機能しません。

DOM モデルはイベントを DOM 要素からその親要素、さらには一番上まで伝達するため、イベントに対して機能します。したがって、リンクをクリックすると、そのリンクを含むもの (divたとえば、)、そのコンテナを含むもの、というように、bodyタグまでずっとクリックし、最終的にはdocumentそれ自体をクリックすることになります。 .on()動的な子要素ではなく、共通の親要素のクリック イベントにバインドすることでこれを利用するため、親のイベント ハンドラーを失うことなく、子要素を追加/削除できます。

ただし、プラグインの初期化はこの方法では機能しません。ターゲット要素でプラグインを初期化するには、要素自体で行う必要があります。つまり、要素がその時点で DOM にある必要があります。したがって、新しい要素を動的に追加する場合は、それらの新しい要素をターゲットにして、それらのプラグインを初期化する必要があります。したがってsuccess、AJAX 呼び出しからの関数はそれを行う必要があります。

AJAX 呼び出し自体が初期化の内部にあるため、これらの一部を再利用のために別の関数に分割する必要があることに注意してください。そうしないと、この再初期化が自身の内部に無期限にネストされます。

多分このようなもの：

var datePickerClose = function (dateText, inst) {

    var selectedDate = $(this).datepicker("getDate"); //Date object

    $.ajax({
        url: "/url",
        dataType: "json",
        method: 'post',
        data: {
            value: selectedDate.toDateString() + ' ' + selectedDate.toTimeString()
        },
        beforeSend: function () {
            $("#loading").fadeIn();
        },
        success: function (data, textStatus) {
            $("#content").html(data);
            $("#content").find("[id^=startPicker]").each(function () {
                bindDatePicker(this);
            });
        },
        complete: function () {
            $("#loading").fadeOut();
        }
    });
};

var bindDatePicker = function(element) {
    $(element).datetimepicker({
        showOn: "button",
        buttonImage: "/img/calendar_icon.png",
        buttonImageOnly: true,
        dateFormat: 'mm/dd/yy',
        timeFormat: 'hh:mm tt',
        stepMinute: 1,
        onClose: datePickerClose
    });
};

$("[id^=startPicker]").each(function() {
    bindDatePicker(this);
});

もちろん、これは概念を説明するためだけにフリーハンドでテストされていないコードです。少し調整が必要な場合があり、同じロジックを実現するためのより洗練された方法がある場合があります。

于 2013-07-27T19:23:38.007 に答える
2

プラグインを委任することはできません。委任はイベント リスナー専用です。ターゲット要素が追加されたら、成功コールバック関数を使用し、datepicker プラグインを再初期化します

success: function (data, textStatus) {
    $("#content").html(data).find('[id^=startPicker]').datepicker({...});
},
于 2013-07-27T19:21:12.290 に答える
0

実際、これを行う最も簡単な方法は、次のように成功関数内にバインド コードを配置することですELEMENT.datepicker();。

例えば：$('.datepicker').datepicker();

完全なコード:

$('#loaddetails').on('click',function(){
                //Run ajax fetch here
                    $.ajax({
                       type: "POST",
                       url: "yourlink",
                       data: $('form').serialize(), // serializes the form's elements.
                       dataType: 'json',
                       beforeSend: function () {
                         console.log('Form serialised');
                         $('#status').html('<img src="../img/spinner.gif" width="16" height="16">');
                         },
                       success: function(data)
                       {
                        $('#status').html(data);
                        $('.datepicker').datepicker();
                          },
                          error: function (xhr, ajaxOptions, thrownError) {
                            alert(xhr.status);
                            alert(thrownError);
                          }
                     });
                console.log("All ok");
                return false;
            });
于 2016-10-07T14:23:10.720 に答える