jquery datepicker不適用於克隆元素

Question

我有一個jquery日期選擇器字段，當用戶單擊“ Add按鈕時，我將克隆該字段。 我希望日期選擇器顯示在屏幕上隨后添加的字段中。 現在，datepicker僅出現在第一個字段中，而not for the added/cloned fields 。

在這里檢查了很多關於類似主題的帖子后，我能夠在這個階段達成目標。 以下是我的代碼。

<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;之前添加此行return false; ：

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

Answer 2

在點擊功能中初始化日期選擇器..

$('.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');

});
  newSection.find(".dateListValues").datepicker(); //here
  return false;
});