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);});当然,这只是徒手的未经测试的代码,目的只是为了演示该概念。这可能需要一些调整,并且可能会有更优雅的方法来实现相同的逻辑。



