javascript - jquery datepicker 不适用于克隆的元素

Question

我有一个 jquery 日期选择器字段，当用户单击 Add 按钮时，我正在克隆它。我希望日期选择器出现在屏幕上随后添加的字段中。现在，日期选择器只出现在第一个字段中，不显示在添加/克隆的字段中。

在这里查看了很多关于类似主题的帖子后，我能够到达这个阶段。到目前为止，下面是我的代码。

<div class="repeatingSection">
<a href="#" class="deleteDate" style="display: none;">-Delete</a>
<input type="text" class="dateListValues" style="position: relative; z-index:100000;" 
       id="dateListValues_1" size="15" />
</div>
<a href="#" class="addDate">+ Add</a>

JS:

// Add a new repeating section
$('.addDate').click(function(){
    var currentCount =  $('.repeatingSection').length;
    var newCount = currentCount+1;
    var newID;
    var lastRepeatingGroup = $('.repeatingSection').last();
    var newSection = lastRepeatingGroup.clone();
    newSection.insertAfter(lastRepeatingGroup);
    newSection.find("input").each(function (index, input) {
        input.id = input.id.replace("_" + currentCount, "_" + newCount);
        input.name = input.name.replace("_" + currentCount, "_" + newCount);
        input.value = "";
            //removing the additional hasDatepicker class 
        $('#'+input.id).removeClass('hasDatepicker');
    });

    return false;
});

   $('.dateListValues').each(function(){
    $(this).datepicker();
   });

谢谢。

Answer 1

您需要在新创建的元素上初始化datepicker 插件。尝试在 return false; 之前添加这一行:

newSection.find(".dateListValues").datepicker();