不显眼的 javascript 和动态 html答案

【问题标题】：Unobtrusive javascript and dynamic html不显眼的 javascript 和动态 html
【发布时间】：2012-04-21 06:30:49
【问题描述】：

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

<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 的场景。

我查看了mutation events，但它们在 IE 中不受支持。

完整的jsfiddle示例http://jsfiddle.net/zv9Rt/1/

【问题讨论】：

这些输入元素是如何添加的？通过 jQuery，还是通过 DOM？
@RobW，实际上它将是 jquery-pjax 或 jquery.ajax.unobtrusive。他们都使用 jquery.html 方法。但我想要更通用的解决方案。
您可以使用 setTimeout/setInterval 来检查是否有新的插入，或者包裹.append、.html 等，并检查是否存在新的input[type=date] 元素。
@RobW 我想过 setTimeout/setInterval 但我不喜欢它们。
Livequery.

标签： jquery html dynamic unobtrusive-javascript

【解决方案1】：

使用Livequery • Documentation。

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

【讨论】：

无论如何。它正在使用 setInterval/setTimeout，所以我要为突变事件添加支持。
@hazzik 不，不是。它包装了.append、.html 等方法，正如我在问题的 cmets 中所描述的那样。 setTimeout 可能用于确保元素已正确渲染。

【解决方案2】：

只需使用.on()。

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

【讨论】：

当我想使用一些漂亮的日期选择器选项（如 showOn 等）时，这是不合适的。查看示例jsfiddle.net/zv9Rt/2

【解决方案3】：

使用$.delegate:

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

【讨论】：

对不起。我忘了包括一个父选择器。我已经修好了。