jquery datepicker funktioniert nicht für geklonte Elemente

Question

Ich habe ein jquery date picker Feld, das ich Klonen, wenn ein Benutzer auf eine Add Schaltfläche klickt. Ich möchte die Datumsauswahl für die anschließend hinzugefügten Felder auf dem Bildschirm erscheinen. Gerade jetzt erscheint der Datumsauswahl nur für das erste Feld und not for the added/cloned fields.

Nachdem ich viele Beiträge zu ähnlichen Themen hier überprüft habe, konnte ich in diesem Stadium erreichen. Unten ist mein Code soweit.

<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(); 
    }); 

Dank.

Answer 1

Sie müssen das datepicker Plugin auf dem neu erstellten Element initialisieren. Versuchen Sie, diese Zeile direkt vor Ihrer return false;:

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

Answer 2

initailize Datumsauswahl in der Klick-Funktion ..

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