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

我有一个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; 

现在下一个$（元素）.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(''); }, success: function(data) { $('#status').html(data); $('.datepicker').datepicker(); }, error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); } }); console.log("All ok"); return false; });