So lösen Sie das Problem, dass Jquerys bei der Bindung eines Klickereignisses zweimal ausgeführt werden-js-Tutorial-php.cn

So lösen Sie das Problem, dass Jquerys bei der Bindung eines Klickereignisses zweimal ausgeführt werden

小云云

Freigeben： 2018-03-17 11:58:34

Original

2140 Leute haben es durchsucht

Wenn Sie .on() in jquery verwenden, um einem neu hinzugefügten Element auf der Seite ein Klickereignis hinzuzufügen, klicken Sie auf die Ereignisquelle und das gebundene Ereignis wird zweimal ausgeführt . Die Warnung hier wird zweimal ausgeführt, und dementsprechend wird auch das Löschen des Arrays wie folgt ausgeführt (wobei .tabDel ein neu generiertes Element ist, nachdem die Seite geladen wurde, also gewöhnliches $('.tabDel). click(function(){}) kann nicht verwendet werden Methode zum Hinzufügen eines Klickereignisses):

$(&#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();
        });

Nach dem Login kopieren

Es gibt wahrscheinlich zwei Lösungen im Internet:
1 Bevor Sie das Klickereignis mit on binden, Lösen Sie die Bindung des Ereignisses, d Ich bin auf die Situation gestoßen, dass die Warnung nach dem Schreiben nicht ausgeführt wird. Der Grund dafür ist, dass „.tabDel“ ein später generiertes Element auf der Seite ist und nicht direkt an das Ereignis gebunden werden kann . Die Syntax von unbind() lautet:

$(&#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();
        });

Nach dem Login kopieren

Also habe ich nach anderen Möglichkeiten gesucht, das Problem zu lösen, nachdem on an das Ereignis gebunden war Um das Sprudeln zu verhindern, lief das Ereignis wie folgt:

$(&#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;);

Nach dem Login kopieren

Bisher kann der Code normal laufen. Der Übeltäter des Problems ist das Sprudeln, aber der Blogger hat falsch geschaut zunächst die Richtung.

Die Methode zur Verhinderung von Blasenbildung ist jedoch nicht nur „return false“, sondern auch „event.stopPropagation()“. Es gibt einen Unterschied zwischen diesen beiden Methoden:

$(selector).unbind(event,function)

Nach dem Login kopieren

event.stopPropagation() verhindert das Ereignis up, verhindert aber nicht das Ereignis selbst;

return false verhindert nicht nur, dass das Ereignis sprudelt, sondern blockiert auch das Ereignis selbst.

Um mehr über die Unterschiede zwischen diesen beiden Methoden zu erfahren, finden Sie hier relevante Informationen.

 $(&#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;
        });

Nach dem Login kopieren

Verwandte Empfehlungen:

Über die js-Index-Subskript-Li-Sammlung, die die gemeinsame Nutzung von Klickereignissen instanziert

jQuery-Implementierung, wenn zurückgeklickt wird. Bindung von Klickereignissen, wenn Drücken der Autotaste_jquery

JavaScript-Methode zum Binden von Klickereignissen (Onclick) an Buttons_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass Jquerys bei der Bindung eines Klickereignisses zweimal ausgeführt werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!