0

我正在使用 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 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.
4

2 回答 2

2

jQuery UI 的 datepicker 将始终将类添加hasDatepicker到具有 datepicker 的任何元素，以避免将多个 datepicker 附加到同一元素。
当你克隆一个已经有日期选择器的元素时，你也会得到那个类，并且你不能将一个新的日期选择器附加到克隆上，因为 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());

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

于 2013-06-23T02:32:31.977 回答
0

这行得通吗？

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

演示 JSfiddle

于 2013-06-23T02:23:24.237 回答