Wie wende ich Datepicker dynamisch auf erstellte Elemente in jQuery an?

Datepicker dynamisch auf erstellte Elemente anwenden

In jQuery kann es zu einer Herausforderung kommen, wenn Sie versuchen, eine Datepicker()-Funktion auf dynamisch erstellte Elemente anzuwenden Elemente. Obwohl allen Elementen eine gemeinsame Klasse zugewiesen wurde, funktioniert dies möglicherweise nur für das erste Element.

Problem:

Sie haben dynamisch Textfelder erstellt, für die ein Datumsauswahlkalender erforderlich ist erscheinen beim Klicken. Die Verwendung des folgenden Codes:

$(".datepicker_recurring_start" ).datepicker();

führt dazu, dass nur das erste Textfeld den Kalender anzeigt.

Lösung:

Um dieses Problem zu beheben, verwenden Sie Der folgende Ansatz:

$('body').on('focus', ".datepicker_recurring_start", function(){
    $(this).datepicker();
});​

Erklärung:

Dieser Code nutzt delegierte Ereignisse in jQuery. Es fügt dem gesamten Körper (dem Körperelement) einen Zuhörer für das Fokusereignis hinzu. Wenn ein Element mit der Klasse datepicker_recurring_start den Fokus erhält, wird die Inline-Funktion ausgeführt. Diese Funktion initialisiert dann die datepicker()-Funktion ausschließlich für das Element, das das Ereignis ausgelöst hat.

Mit dieser Technik können Sie dynamisch Elemente mit einer Datepicker-Funktionalität erstellen, die bei Benutzerinteraktion aktiv wird. Weitere Einzelheiten finden Sie in der jQuery-Dokumentation zu delegierten Ereignissen (http://api.jquery.com/on/).

Das obige ist der detaillierte Inhalt vonWie wende ich Datepicker dynamisch auf erstellte Elemente in jQuery an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!