Comment résoudre le problème de l'exécution de l'événement de clic de liaison de jquery deux fois-js tutoriel-php.cn

Comment résoudre le problème de l'exécution de l'événement de clic de liaison de jquery deux fois

小云云

Libérer： 2018-03-17 11:58:34

original

2179 Les gens l'ont consulté

Lorsque vous utilisez .on() dans jquery pour ajouter un événement de clic à un élément nouvellement ajouté sur la page, cliquez sur la source de l'événement et l'événement lié sera exécuté deux fois . L'alerte ici sera exécutée deux fois, et par conséquent la suppression du tableau est également exécutée deux fois. Le code spécifique est le suivant (où .tabDel est un élément nouvellement généré après le chargement de la page, donc ordinaire $('.tabDel). click(function(){}) ne peut pas être utilisé Méthode pour ajouter un événement click) :

$(&#39;.right&#39;).on(&#39;click&#39;,&#39;.tabDel&#39;,function(){//删除所加 tab 节点的函数
            alert(&#39;tab的索引：&#39;+$(this).parents(&#39;.contentLi2&#39;).index());            var iNum1 = $(this).parents(&#39;.contentLi2&#39;).index();            var iNum2 = $(this).parents(&#39;.anElement&#39;).index();
            $scope.module.tab[iNum1].fieldList.splice(iNum2,1);
            $(this).parents(&#39;.anElement&#39;).remove();
        });

Copier après la connexion

Il existe probablement deux solutions trouvées sur Internet :
1 Avant de lier l'événement click avec on, dissocier l'événement, c'est-à-dire

$(&#39;.right&#39;).off(&#39;click&#39;,&#39;.tabDel&#39;).on(&#39;click&#39;,&#39;.tabDel&#39;,function(){//删除所加 tab 节点的函数
            // alert(&#39;tab的索引：&#39;+$(this).parents(&#39;.contentLi2&#39;).index());
            var iNum1 = $(this).parents(&#39;.contentLi2&#39;).index();            var iNum2 = $(this).parents(&#39;.anElement&#39;).index();
            $scope.module.tab[iNum1].fieldList.splice(iNum2,1);
            $(this).parents(&#39;.anElement&#39;).remove();
        });

Copier après la connexion

2. Dissocier après l'exécution de l'événement de clic lié, en utilisant unbind(), c'est-à-dire :

$(&#39;.right&#39;).on(&#39;click&#39;,&#39;.tabDel&#39;,function(){//删除所加 tab 节点的函数
            // alert(&#39;tab的索引：&#39;+$(this).parents(&#39;.contentLi2&#39;).index());
            var iNum1 = $(this).parents(&#39;.contentLi2&#39;).index();            var iNum2 = $(this).parents(&#39;.anElement&#39;).index();
            $scope.module.tab[iNum1].fieldList.splice(iNum2,1);
            $(this).parents(&#39;.anElement&#39;).remove();
        });
        $(&#39;.right .tabDel&#39;).unbind(&#39;clock&#39;);

Copier après la connexion

Cependant, cela a été fait. ne résout pas le problème. La situation est qu'après avoir écrit ceci, l'alerte ne sera pas exécutée. La raison en est que, comme mentionné précédemment : ".tabDel" est un élément généré ultérieurement sur la page et ne peut pas être directement lié à l'événement. . La syntaxe de unbind() est :

$(selector).unbind(event,function)

Copier après la connexion

J'ai donc commencé à chercher d'autres moyens de résoudre le problème. Plus tard, j'ai découvert que le bouillonnement n'était pas empêché lorsque on était lié à l'événement. au code pour éviter le bouillonnement, l'événement s'est déroulé normalement. Le code est le suivant :

 $(&#39;.right&#39;).on(&#39;click&#39;,&#39;.tabDel&#39;,function(){//删除所加 tab 节点的函数
            // alert(&#39;tab的索引：&#39;+$(this).parents(&#39;.contentLi2&#39;).index());
            var iNum1 = $(this).parents(&#39;.contentLi2&#39;).index();            var iNum2 = $(this).parents(&#39;.anElement&#39;).index();
            $scope.module.tab[iNum1].fieldList.splice(iNum2,1);
            $(this).parents(&#39;.anElement&#39;).remove();            return false;
        });

Copier après la connexion

Jusqu'à présent, le code peut s'exécuter normalement. Le coupable du problème est le bouillonnement, mais le blogueur a mal regardé. direction dans un premier temps.
Cependant, la méthode pour empêcher les bulles n'est pas seulement return false, mais aussi event.stopPropagation(). Il y a une différence entre ces deux méthodes :
event.stopPropagation() empêchera l'événement. up, mais n'empêche pas l'événement lui-même ;
return false empêche non seulement l'événement de se déclencher, mais bloque également l'événement lui-même.
Pour en savoir plus sur les différences entre ces deux méthodes, veuillez trouver les informations pertinentes.

Recommandations associées :

À propos du partage d'instance d'événement de clic de liaison d'indice li d'indice js

Implémentation de jQuery lorsque vous cliquez en arrière Liaison d'événements de clic lorsque en appuyant sur la touche de voiture_jquery

Méthode JavaScript pour lier les événements de clic (onclick) aux compétences boutons_javascript

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!