Ajax刷新后如何绑定jQuery Datepicker？ [英] How to bind jQuery Datepicker after Ajax refresh?
问题描述
我有一个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对象
$ .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（）;
}
}）;
}
}）;
不会第一次绑定或随后刷新：
$ b $（$ {code）$（'＃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对象
$ .ajax（{
url：/ url，
dataType：json，
方法：'post'，
data：{
value：selectedDate.toDateString（）+''+ selectedDate.toTimeString（）
}，
beforeSend：function（）{
$（＃loading）。fadeIn（）;
}，
success：function（data，textStatus）{
$（＃content）。html（data）;
}，
complete：function（）{
$（＃loading）。fadeOut（）;
}
}）;
}
}）;
}）;
jQuery .on ）函数用于延迟事件处理，但它不适用于插件初始化。
它适用于事件，因为DOM模型传播事件从DOM元素到其父元素，一直到顶部。所以当您点击一个链接时，您也可以点击任何包含该链接的内容（例如一个 div ），不管包含该容器，还是一直等到到正文标签，最后是文档本身。 .on（）通过绑定到公共父元素的点击事件而不是动态子元素来利用这一点，因此可以添加/删除子元素，而不会丢失事件处理程序在父级。
虽然插件初始化不会这样工作。为了在目标元素上初始化一个插件，它必须在元素本身上完成，这意味着元素需要在DOM中。因此，当您动态添加新元素时，您需要定位这些新元素并初始化插件。因此，您的AJAX调用中的成功函数将需要执行此操作。
请注意，由于您的AJAX调用本身在您初始化的 之前，您将需要将其中的一些分割成单独的函数以供重用。否则，这种重新初始化将无限期地嵌套在自己的内部。
也许这样：
code> 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 ）$ f $（$）
}，
成功：function（data，textStatus）{
$（＃content）。 #content）find（[id ^ = startPicker]）。each（function（）{
bindDatePicker（this）;
}）;
}，
完成：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）;
}）;
这当然是免费的未经测试的代码，只是为了演示这个概念。它可能需要一点调整，可能会有一个更优雅的方式来完成相同的逻辑。
I've got a jQuery datepicker that is working great for me, except when I fresh the content via ajax, I lose the datepicker. From what I can tell I should be using jQuery on() to bind it to the input, but I can't seem to find the right event to bind it to.
Works the first time, but not on subsequent refreshes:
$("[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();
}
});
}
});
Doesn't bind first time or on subsequent refreshes:
$('#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();
}
});
}
});
});
The jQuery .on() function is for deferred event handling, but it doesn't work for plugin initialization.
It works for events because the DOM model propagates events from DOM elements to their parent elements, all the way to the top. So when you click on a link, you're also clicking on whatever contains that link (a div for example), whatever contains that container, and so on all the way up to the body tag and eventually the document itself. .on() takes advantage of this by binding to the click event of a common parent element instead of the dynamic child elements, so child elements can be added/removed without losing the event handler on the parent.
Plugin initialization doesn't work this way, though. In order to initialize a plugin on a target element, it must be done on the element itself which means the element needs to be in the DOM at the time. Thus, when you add new elements dynamically, you need to target those new elements and initialize the plugin on them. So your success function from the AJAX call would need to do that.
Note that since your AJAX call is itself inside of your initialization, you're going to need to split some of these out into separate functions for re-use. Otherwise this re-initialization would nest inside itself indefinitely.
Maybe something like this:
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);
});
This is, of course, free-hand untested code just to demonstrate the concept. It may require a little tweaking, and there may be a more elegant way to accomplish the same logic.
这篇关于Ajax刷新后如何绑定jQuery Datepicker？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
