jquery - 不显眼的 javascript 和动态 html

Question

我正在寻找一种data-*在动态 html 场景中制作不显眼的 javascript（通过属性）的方法。假设我们有一个input代表 jquery-ui 日期选择器的元素：

<input type="date" data-min-date="today" />

以及起作用的js：

(function(){
    $(function () {
        $("input[type=date]").each(function () {
            var el = $(this);
            el.datepicker(el.data());
        });
    });
})(jQuery);

现在我需要不显眼的跨浏览器方式将裸输入转换为日期选择器。输入将被动态添加。一般来说，我无法控制添加日期选择器的代码。通常，代码将通过jquery.ajax.unobtrusive或jquery-pjax作为服务器端预渲染 html 注入（它们都使用 jQuery.html() 方法）。但我需要更通用的解决方案，它适用于所有支持 jQuery 的场景。

我查看了突变事件，但 IE 不支持它们。

完整的 jsfiddle-example http://jsfiddle.net/zv9Rt/1/

Answer 1

使用$.delegate：

(function(){
  $(function () {
    $('body').delegate("input[type=date]", function () {
        var $el = $(this);
        $el.datepicker($el.data());
    });
  });
})(jQuery);

Answer 2

只需使用.on()。

这是一个示例：http: //jsfiddle.net/H7ZUa/1/

Answer 3

使用Livequery •文档。

$("input[type=date]").livequery(function() {
    var el = $(this);
    el.datepicker(el.data());
});