Comment activer les sélecteurs de date sur les champs de saisie créés dynamiquement à l'aide de jQuery ou de jQuery UI ?

Attacher des sélecteurs de date aux éléments créés dynamiquement - JQuery/JQueryUI

Description du problème :

Un essayez de créer dynamiquement des zones de texte et d'activer un sélecteur de date pour chaque clic en utilisant le code suivant, seule la première zone de texte reçoit un sélecteur de date.

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

Solution :

Pour activer les sélecteurs de date sur tous les éléments créés dynamiquement, le code doit utiliser la délégation d'événements à l'aide de la méthode on() de jQuery, comme démontré ci-dessous :

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

Explication :

Le La méthode on() ajoute un écouteur d'événement à l'élément body, qui est le parent de toutes les zones de texte créées dynamiquement. Lorsque la classe datepicker_recurring_start est ciblée (par exemple, lorsque les utilisateurs cliquent sur un champ de saisie avec cette classe), la méthode datepicker() est appliquée à l'élément ciblé.

Cette approche utilise la délégation d'événement, qui permet d'attacher un événement les écouteurs des éléments qui sont ajoutés ou supprimés dynamiquement du DOM. Dans ce cas, l'élément body est utilisé comme cible de l'écouteur d'événement et le sélecteur de classe datepicker_recurring_start est utilisé pour identifier les éléments spécifiques qui doivent déclencher le sélecteur de date lorsqu'il est focalisé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!