javascript - 无法将日期选择器添加到新元素

Question

我使用 jquery 动态添加新的表单元素。由于某种原因，对 .datepicker() 的调用对我添加的新元素不起作用，但对未动态添加的旧元素起作用。如果我输入 .attr('style', 'color: red;')而不是 .datepicker()，它可以工作。请注意，文档就绪函数内部的原始调用有效。

这是单击添加按钮时调用的代码:

function addMulti(name) {
    it = $('[name=' + name + ']');
    base = it.data('baseName');
    on = it.data('number') + 1;
    name = base + "-" + on;
    copy = it.clone()
    copy.prop("name", name).attr("data-is-default", false).removeAttr('data-number').
        fadeIn('slow').appendTo(it.parent());
    it.data('number', on); 
    if(it.hasClass('date-pickable')) { // <-- This returns true, I checked.
        copy.datepicker();
    // Where if I add clone.attr('style', 'color: red;') it turns it red.
}
}

这是调用日期选择器时创建的所有字段:

<script type="text/javascript">
$(document).ready(function() {
  $("input.date-pickable").datepicker()
});
</script>

Firebug 或 google chrome“检查元素”中没有显示任何错误。但有些奇怪的事情正在发生。如果我在 firebug consul 中输入与 document.ready 函数中相同的调用，它仍然不会使新添加的元素成为日期选择器。然而，如果我将鼠标悬停在输出上，它会选择它应该定位的元素。

$("input.date-pickable").datepicker() // What I typed in

Object[input#dp1371953134342.field-input 06/22/2013, input#dp1371953134343.field-input, input#dp1371953134342.field-input 06/22/2013, input#dp1371953134342.field-input 06/22/2013] // What it put out. The last three numbers are the IDs JQuery assigned to the added elements. I checked.

Answer 1

jQuery UI 的日期选择器将始终将 hasDatepicker 类添加到任何具有日期选择器的元素，以避免将多个日期选择器附加到同一元素。
当您克隆已经具有日期选择器的元素时，您也会获得该类，并且无法将新的日期选择器附加到克隆，因为 jQuery UI 认为该元素已经具有日期选择器。

从克隆中删除该类:

var copy = it.clone(false);

copy.removeClass('hasDatepicker').prop("name", name)
    .attr("data-is-default", "false").removeAttr('data-number')
    .fadeIn('slow').appendTo(it.parent());

并尽量不要将所有变量设置为全局变量。