Question

我有一个jQuery datepicker对我很有用，除非我通过ajax刷新内容，否则我会丢失datepicker。从我可以告诉我应该使用jQuery on（）将它绑定到输入，但我似乎无法找到正确的事件来绑定它。

第一次工作，但不是后续刷新：

$("[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();
                    }
                });
            }
        });
    });

Answer 1

jQuery .on()函数用于延迟事件处理，但它不适用于插件初始化。

它适用于事件，因为DOM模型将事件从DOM元素传播到其父元素，一直传播到顶部。因此，当您单击某个链接时，您还会点击包含该链接的任何内容（例如div），包含该容器的内容，依此类推，一直到body标记，最终是document本身。 .on()通过绑定到公共父元素的click事件而不是动态子元素来利用这一点，因此可以添加/删除子元素，而不会丢失父元素上的事件处理程序。

但是，

插件初始化不会以这种方式工作。为了初始化目标元素上的插件，必须在元素本身上完成，这意味着元素当时需要在DOM中。因此，当您动态添加新元素时，您需要定位这些新元素并在其上初始化插件。因此，AJAX调用中的success函数需要这样做。

请注意，由于您的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);
});

这当然是免费的未经测试的代码，只是为了演示这个概念。它可能需要稍微调整，并且可能有更优雅的方式来实现相同的逻辑。

Answer 2

您不能委托插件，委托仅用于事件侦听器。使用成功回调函数，并在添加目标元素后重新初始化datepicker插件

success: function (data, textStatus) {
    $("#content").html(data).find('[id^=startPicker]').datepicker({...});
},

Answer 3

我有一个类似的问题：在ajax页面重新加载后，我无法使用 $（element）.datepicker（）设置新的datepicker。因为Datepicker只执行一次干净的初始化，所以我只是在ajax成功之后直接设置：

$.datepicker.initialized = false;

现在下一个 $（element）.datepicker（）将导致新的初始化。这会影响侧面的所有日期选择器，因此您可能在ajax-container之外重置了datpicker。

Answer 4

实际上，我发现这样做的最简单方法是简单地将绑定代码放在成功函数中，如下所示：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;
            });

如何在Ajax刷新后绑定jQuery Datepicker？

4 个答案: