recherche

Maison >interface Web >js tutoriel >Explication détaillée de jQuery ajoutant une réponse à un événement au contenu généré dynamiquement jQuery live() method_jquery

Explication détaillée de jQuery ajoutant une réponse à un événement au contenu généré dynamiquement jQuery live() method_jquery

WBOY
WBOYoriginal
2016-05-16 15:34:151338parcourir

La méthode jQuery live() attache une fonction de traitement d'événements à tous les éléments correspondants. Même si l'élément est généré ultérieurement via append, prepend, after et d'autres événements, il sera toujours valide.
Cette méthode peut être considérée comme une variante de la méthode .bind(). Lors de l'utilisation de .bind(), les éléments correspondant au sélecteur auront un gestionnaire d'événements qui leur sera attaché, contrairement aux éléments ajoutés ultérieurement. Vous devez utiliser à nouveau .bind() pour cela. Par exemple : 

<body> 
<div class="clickme">Click here</div> 
</body>

Vous pouvez lier un simple événement clic à cet élément :

Copiez le code Le code est le suivant :
$(' .clickme').bind('click', function() { alert(www.jb51.net); }); Lorsqu'un élément est cliqué, une boîte d'avertissement apparaîtra. Imaginez ensuite qu’un autre élément soit ajouté après cela.


Copier le code Le code est le suivant :$('body').append('e30c916a7b9ffc134e936895ca5047d6Une autre cible16b28748ea4df4d9c2150843fecfba68');
Bien que ce nouvel élément corresponde également au sélecteur ".clickme" , puisque cet élément est ajouté après l'appel de .bind() , cliquer sur cet élément n'aura aucun effet.
Mais live() fournit une méthode pour cette situation. Si on lie l'événement click comme ceci :

Copiez le code Le code est le suivant : $('.clickme '). live('clic', function() { alert("
www.jb51.net
"); }); De cette façon, cliquer sur l'élément nouvellement ajouté peut toujours déclencher le gestionnaire d'événements. Délégation événementielle
La méthode
live() fonctionne sur un élément qui n'a pas encore été ajouté au DOM du fait de l'utilisation de la délégation d'événements : les gestionnaires d'événements liés aux éléments ancêtres peuvent répondre aux événements déclenchés sur les descendants. Le gestionnaire d'événements passé à live() ne sera pas lié à l'élément, mais sera traité comme un gestionnaire d'événements spécial et lié au nœud racine de l'arborescence DOM.
Dans notre exemple, lorsqu'un nouvel élément est cliqué, les étapes suivantes se produisent : 1. Générez un événement de clic et transmettez-le à dc6dce4a544fdca2df29d5ac0ea9906b
2. Puisqu'il n'y a pas de fonction de gestion d'événement directement liée à dc6dce4a544fdca2df29d5ac0ea9906b, l'événement remonte jusqu'à l'arborescence DOM. 3. Les événements continuent de remonter jusqu'au nœud racine de l'arborescence DOM. Cette fonction de traitement d'événements spéciaux y est liée par défaut.
4. Exécutez la fonction spéciale de gestion des événements de clic liée par .live().
5. Cette fonction de traitement d'événements détecte d'abord la cible de l'objet événement pour déterminer s'il doit continuer.
6. Ce test est implémenté en testant si $(event.target).closest('.clickme') peut trouver des éléments correspondants.
7. Si un élément correspondant est trouvé, le gestionnaire d'événements d'origine est appelé.
8. Puisque le test de l'étape 5 ci-dessus ne sera effectué que lorsque l'événement se produira, les éléments ajoutés à tout moment pourront répondre à cet événement.
Ce qui précède est une introduction détaillée à la méthode jQuery live() de jQuery pour ajouter des réponses aux événements au contenu généré dynamiquement. J'espère que cela sera utile à l'apprentissage de chacun.
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Effets de chronologie Jquery (trois types différents)_jqueryArticle suivant：Effets de chronologie Jquery (trois types différents)_jquery

Articles Liés

Voir plus