Ajax刷新后如何绑定jQuery Datepicker？

一尘不染

Ajax刷新后如何绑定jQuery Datepicker？

ajax

我有一个对我来说很棒的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();
                    }
                });
            }
        });
    });

阅读 279

2020-07-26

共1个答案

一尘不染

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

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

不过，插件初始化无法以这种方式工作。为了在目标元素上初始化插件，必须
在元素本身上完成，这意味着该元素当时必须位于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);
});

当然，这只是徒手的未经测试的代码，目的只是为了演示该概念。这可能需要一些调整，并且可能会有更优雅的方法来实现相同的逻辑。

2020-07-26