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

我正在使用jquery动态添加新的表单元素。出于某种原因，调用

.datepicker（）

对我添加的新元素无效，但对未动态添加的旧元素有效。如果我把

.attr（'style'，'color:red；'）放进去

它可以工作，而不是

.datepicker（）

。请注意，documentready函数内部的原始调用是有效的

这是单击“添加”按钮时调用的代码：

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() {
    $(document).on('focus',"input.date-pickable", function(){
        $(this).datepicker();
    });
});
</script>

$（文档）.ready（函数（）{
$（document）.on（'focus'，“input.date pickable”，函数（）{
$（this.datepicker（）；
});
});

---

jQuery UI的日期选择器将始终将类

hasDatepicker

添加到具有日期选择器的任何元素，以避免将多个日期选择器附加到同一元素。
当您克隆一个已经有日期选择器的元素时，您也会得到该类，并且不能将新的日期选择器附加到克隆，因为jqueryui认为该元素已经有了日期选择器

从克隆中删除该类：

var copy = it.clone(false);

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

尽量不要让所有变量都是全局变量

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

var copy = it.clone(false);

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