Comment appliquer dynamiquement des sélecteurs de date aux éléments créés dans jQuery ?

Application dynamique de sélecteurs de date aux éléments créés

Dans jQuery, vous pouvez rencontrer un défi lorsque vous tentez d'appliquer une fonction datepicker() à des éléments créés dynamiquement éléments. Malgré l'attribution d'une classe commune à tous les éléments, cela peut fonctionner uniquement pour le premier élément.

Problème :

Vous avez créé dynamiquement des zones de texte qui nécessitent un calendrier de sélection de date pour apparaissent au clic. En utilisant le code suivant :

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

résulte uniquement dans la première zone de texte affichant le calendrier.

Solution :

Pour résoudre ce problème, utilisez l'approche suivante :

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

Explication :

Ce code exploite les événements délégués dans jQuery. Il ajoute un auditeur au corps entier (l'élément corps) pour l'événement de focus. Lorsqu'un élément avec la classe datepicker_recurring_start obtient le focus, la fonction en ligne est exécutée. Cette fonction initialise ensuite la fonction datepicker() exclusivement pour l'élément qui a déclenché l'événement.

En utilisant cette technique, vous pouvez créer dynamiquement des éléments avec une fonctionnalité de sélecteur de date qui devient active lors de l'interaction de l'utilisateur. Reportez-vous à la documentation jQuery sur les événements délégués (http://api.jquery.com/on/) pour plus de détails.

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!