Heim > Web-Frontend > js-Tutorial > Hauptteil

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

Linda Hamilton
Freigeben: 2024-10-20 20:43:02
Original
265 Leute haben es durchsucht

How to Enable Datepickers on Dynamically Created Input Fields Using jQuery or jQuery UI?

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();
Nach dem Login kopieren

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();
});​
Nach dem Login kopieren

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!

Quelle:php
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage