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“inspect element”中没有出现任何错误。虽然发生了奇怪的事情。如果我在document.ready函数中输入与firebug领域相同的调用，它仍然不会使新添加的元素为datepickers。然而，如果我将鼠标悬停在输出上，它会选择它应该定位的元素。

$("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的datepicker将始终将类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());

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

Answer 2

这会有用吗？

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

Demo JSfiddle

无法将datepicker添加到新元素

2 个答案: