Wie aktiviere ich Datepicker für dynamisch erstellte Eingabefelder mithilfe von jQuery oder der jQuery-Benutzeroberfläche?

Datepicker an dynamisch erstellte Elemente anhängen – JQuery/JQueryUI

Problembeschreibung:

An Der Versuch, Textfelder dynamisch zu erstellen und bei jedem Klick eine Datumsauswahl zu aktivieren, führt dazu, dass nur das erste Textfeld eine Datumsauswahl erhält.

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

Lösung:

Um Datumsauswahlfunktionen für alle dynamisch erstellten Elemente zu aktivieren, sollte der Code die Ereignisdelegierung mithilfe der on()-Methode von jQuery verwenden, wie unten gezeigt:

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

Erklärung:

Die Die Methode on() fügt dem Body-Element, das das übergeordnete Element aller dynamisch erstellten Textfelder ist, einen Ereignis-Listener hinzu. Wenn die datepicker_recurring_start-Klasse im Fokus steht (z. B. wenn Benutzer mit dieser Klasse auf ein Eingabefeld klicken), wird die datepicker()-Methode auf das fokussierte Element angewendet.

Dieser Ansatz verwendet die Ereignisdelegation, die das Anhängen von Ereignissen ermöglicht Listener für Elemente, die dynamisch zum DOM hinzugefügt oder daraus entfernt werden. In diesem Fall wird das Body-Element als Ereignis-Listener-Ziel verwendet und der Klassenselektor datepicker_recurring_start wird verwendet, um die spezifischen Elemente zu identifizieren, die bei Fokussierung den Datepicker auslösen sollen.

Das obige ist der detaillierte Inhalt vonWie aktiviere ich Datepicker für dynamisch erstellte Eingabefelder mithilfe von jQuery oder der jQuery-Benutzeroberfläche?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!