Comment implémenter des sélecteurs de dates dynamiques pour les éléments créés

Implémentation d'un sélecteur de date dynamique pour les éléments créés

Problème :

Vous souhaitez attacher un sélecteur de date à des zones de texte générées dynamiquement . Cependant, en utilisant le code :

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

active le sélecteur de date uniquement pour la première zone de texte, malgré toutes les zones de texte partageant la classe "datepicker_recurring_start."

Solution :

Pour surmonter cette limitation, utilisez le code suivant :

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

Explication :

Ce code utilise la gestion déléguée des événements, qui permet aux écouteurs d'événements de être attaché aux éléments parents et appliqué aux descendants qui correspondent à un sélecteur spécifique. Dans ce cas :

• 'body' est l'élément parent auquel l'écouteur d'événement est attaché.
• 'focus' est l'événement qui déclenche la fonction de rappel lorsqu'un élément dans ' body' avec la classe ".datepicker_recurring_start" reçoit le focus.
• Dans la fonction de rappel, $(this).datepicker(); active la fonctionnalité de sélecteur de date sur l'élément ciblé (datepicker_recurring_start).

En vous appuyant sur la liaison d'événement dynamique, vous pouvez vous assurer que les sélecteurs de date sont attachés à tous les éléments créés dynamiquement avec la classe ".datepicker_recurring_start" à chaque fois l'événement focus est déclenché.

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!