Maison > interface Web > js tutoriel > jquery empêche le bouillonnement d'événements et sa solution

jquery empêche le bouillonnement d'événements et sa solution

一个新手
Libérer: 2017-09-13 10:05:58
original
2135 Les gens l'ont consulté


Événement en direct pour l'ajout dynamique de balises

Remarque : jquery ne prend plus en charge les événements en direct après la version 1.8

Problèmes rencontrés dans les projets réels, balises ajoutées dynamiquement
Live empêche le bouillonnement de se produire. Que vous utilisiez return false ou e.stopPropagation(), vous ne pouvez pas empêcher le bouillonnement de se produire
Ce qui suit est un exemple de mon propre résumé

html
<p id="box"> 
  <a href="javascript:;" class="delete">init html</a>
</p> 
<button id="add">add html</button>
Copier après la connexion
jq
 $(function() {

     // 用click事件
    $(document).click( function(event) {
        console.log(&#39;click&#39;);
        event.stopPropagation();
    });

    // 用delegate事件
    $(document).delegate(&#39;.delete&#39;,&#39;click&#39;, function(event) {
        console.log(&#39;delegate&#39;);
        event.stopPropagation();
    });

    // 用live事件
    $(&#39;.delete&#39;).live(&#39;click&#39;, function(event) {
        console.log(&#39;live&#39;);
        event.stopPropagation();
        //return false;
    });

    // 新添加的a标签
    $(&#39;#add&#39;).click(function() {
        var html = &#39;<a href="javascript:;" class="delete">new html 1</a>&#39;;
        $(&#39;#box&#39;).append(html);
    });

    $(&#39;#box&#39;).click(function() {
        console.log(&#39;box emit&#39;);
    });

});
Copier après la connexion

Solution :
Nous savons que event.stopPropagation( ) a un impact négatif sur le clic. La prévention du bouillonnement est efficace, vous pouvez alors lier l'événement de clic à l'étiquette nouvellement ajoutée dynamiquement.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal