jQuery 将当前(和 future )输入转换为日期选择器

Question

使用 jquery，我知道如何将所有当前输入转换为日期选择器(这发生在 $(document).ready 事件中):

$('.date').each(function() {
    $(this).datepicker({ ... });
});

我的问题是:即使对于 future 的日期选择器，我怎样才能做到这一点？ (即稍后添加到 DOM 的 input.date)。我尝试了这个(也在 $(document).ready 内)，但不起作用:

$(document).on('ready', '.date', function(){
    $(this).datepicker({ ... });
});

注释:新的 input.date 对象通过调用祖先节点中的 .html() 添加到 dom。 .html 调用的内容是通过从后端渲染部分模板来获取的。

Answer 1

您可以使用jQuery.initialize plugin这适用于类似的用例。正如 @Roberto 指出的，它基于 MutationObserver。

来自 github 页面:

创建 jquery.initialize 插件是为了帮助维护页面上动态创建的元素。

It has exacly the same syntax like jQuery $elem.each function.

The difference is that jQuery elem .each function is called only once on elements that exist on page right now.

.initialize function will call function again on new items matching selecotr automatically just when they will be created by ajax or pretty much anything you can imagine to add new elements to page.

初始化与 .each 函数具有完全相同的语法:

$(".some-element").initialize( function(){
    $(this).css("color", "blue");
});

但是现在如果页面上出现与 .some-element 选择器匹配的新元素，它将立即初始化。添加新项目的方式并不重要，您不需要关心任何回调等。

$("<div/>").addClass('some-element').appendTo("body"); //new element will have blue color!