Cette section de notre site s'adresse aux développeurs web et aux intégrateurs. Nous partageons dans ces pages avec un public spécialisé notre expérience (et nos expériences) dans toutes les domaines de la programmation web.
jQuery Live: Des événements pour vos éléments créés dynamiquement
Dans mes projets, il m'est souvent arrivé d'ajouter dynamiquement avec jQuery des éléments à une page web, auxquels je souhaitais dynamiquement assigner des événements JavaScript. Une des solutions consisterait à appeler à chaque fois la méthode bind() sur les objets créés. Un des inconvénients de cette technique, c'est qu'il est alors nécessaire de sélectionner uniquement l'élément nouvellement créé - ou l'on risque d'ajouter plusieurs fois le même gestionnaire d'événement à tous les éléments similaires de la page ! Cet article présente une solution plus astucieuse.
La librairie jQuery propose une méthode extrêmement utile, la méthode live(). Elle permet de définir un gestionnaire d'événement valable pour tous les éléments correspondant à un sélecteur donné, y compris ceux qui n'existent pas encore au moment où la méthode live() est appelée.
Exemple
Nous intégrons à notre page le code HTML suivant:
Et ajoutons un événement live à chacun des paragraphes contenus dans la div #jquery-example:
Et c'est tout. Chaque clic sur un paragraphe ajoutera un nouveau paragraphe à la div #jquery-example, et l'on pourra cliquer sur ces nouveaux paragraphes pour produire le même résultat, sans devoir faire quoi que ce soit de plus.
À bientôt.
Démonstration
Ajouter un élément