duplizieren von jQuery datepicker

Question

Die datepicker Funktion funktioniert nur auf dem ersten Eingabefeld, das erstellt wird.

Ich versuche, einen Datepicker durch Klonen der div zu duplizieren, die es enthält.

<a href="#" id="dupMe">click</a> 
<div id="template"> 
    input-text <input type="text" value="text1" id="txt" /> 
    date time picker <input type="text" id="example" value="(add date)" /> 
</div> 

die Datepicker zu initialisieren, die jQuery UI documentation nach I $('#example').datepicker(); zu tun haben, nur, und es funktioniert, aber nur auf dem ersten Datepicker, die erstellt wird.

Der Code der div zu duplizieren ist folgende:

$("a#dupMe").click(function(event){ 
    event.preventDefault(); 
    i++; 
    var a = $("#template") 
      .clone(true) 
      .insertBefore("#template") 
      .hide() 
      .fadeIn(1000); 
    a.find("input#txt").attr('value', i); 
    a.find("input#example").datepicker(); 
}); 

Das Merkwürdigste ist, dass auf dem document.ready ich habe:

$('#template #example').datepicker(); 
$("#template #txt").click(function() { alert($(this).val()); }); 

und wenn ich auf dem #txt klicken es funktioniert immer.

Answer 1

Ich würde empfehlen, nur einen gemeinsamen Klassennamen zu verwenden. Wenn Sie jedoch aus irgendeinem Grund dagegen sind, können Sie auch eine Funktion schreiben, um Datumsauswahl für alle Textfelder in Ihrer Vorlage div (die nach jeder Duplizierung aufgerufen werden soll) zu erstellen. Etwas wie:

function makeDatePickers() { 
    $("#template input[type=text]").datepicker(); 
} 

Answer 2

Ich benutze eine CSS-Klasse statt:

<input type="text" id="BeginDate" class="calendar" /> 
<input type="text" id="EndDate" class="calendar" /> 

Dann in Ihrer document.ready Funktion:

$('.calendar').datepicker(); 

es auf diese Weise für mehrere Kalenderfelder verwenden für mich funktioniert.

Answer 3

hatte ich ein sehr ähnliches Problem, das nach Stunden des Testens ich eine Lösung gefunden. Ich habe einen HTML-Code-Block kopiert und nach einem Abschnitt eingefügt, der bereits einen jQuery-Datumsauswahlkalender enthielt. Was ich anfangs nicht erkannte, war, dass der jQuery UI-Kalender die Klasse des Elements beim Ausführen der .datepicker()-Funktion ändert. Das Ergebnis ist, wenn Sie versuchen, den Code zu kopieren und eine neue Instanz des Kalenders für diesen neuen Abschnitt zu initiieren, schlägt es fehl, weil das nach dem CSS dort bereits eins ist. Wenn Sie versuchen, .datepicker('destroy') zu verwenden, kann diese Ghost-Instanz nicht zerstört werden, weil sie nicht existiert. Ich löste das Problem, indem ich die Klasse des Datumsauswahlelements in meinem HTML zurücksetzte und dann dem Element das Datum hinzufügte ...

Unten ist der Code, den ich verwendete. Hoffentlich spart dies jemand anderes einige Zeit ...

$('#addaddress').click(function() { 
    var count = $('.address_template').size(); 
    var html = $('.address_template').eq(0).html(); 
    $('#addaddress').before('<div class="address_template">' + html + '</div>'); 
    $('.address_template H1').eq(count).html("Previous Address " + count); 
    $('.address_date').eq(count).attr("class","address_date"); 
    $('.address_date').eq(count).attr("id","movein" + count); 
    $("#movein" + count).datepicker(); 
}); 

Answer 4

Die HTML, die ich bin Klonen hat mehrere Datepicker-Eingänge.

Ryan Stemkoski Antwort Verwenden und Alex King Kommentar, kam ich mit dieser Lösung:

var clonedObject = this.el.find('.jLo:last-child') 
clonedObject.find('input.ui-datepicker').each(function(index, element) { 
    $(element).removeClass('hasDatepicker'); 
    $(element).datepicker(); 
}); 
clonedObject.appendTo('.jLo'); 

Dank yall.