jQueryのバインディングクリックイベントが2回実行される問題を解決する方法-jsチュートリアル-php.cn

jQueryのバインディングクリックイベントが2回実行される問題を解決する方法

小云云

リリース： 2018-03-17 11:58:34

オリジナル

2178 人が閲覧しました

jquery で .on() を使用してページに新しく追加された要素にクリックイベントを追加する場合、イベントソースをクリックすると、バインドされたイベントが 2 回実行されます。ここでのアラートは 2 回実行され、これに応じて配列の削除も 2 回実行されます。具体的なコードは次のとおりです (.tabDel はページが読み込まれた後に新しく生成される要素なので、通常の $('.tabDel).click(function(){} は使用できません)。 ) クリックイベントを追加するメソッド):

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

ログイン後にコピー

オンラインにする私が探している解決策はおそらく 2 つあります:
1. on を使用してクリックイベントをバインドする前に、イベントのバインドを解除します。つまり

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

ログイン後にコピー

2. 後でバインドを解除するにはオンバウンドクリックイベントが実行される場合は、 unbind () を使用します。つまり、

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

ログイン後にコピー

しかし、これを書いた後、私が遭遇した状況は、アラートが実行されないということです。先ほど言ったように、「.tabDel」はページ上で後で生成される要素であり、イベントを直接バインドすることはできません。また、unbind() の構文は次のとおりです:

$(selector).unbind(event,function)

ログイン後にコピー

そこで、私はこの問題に対する他の解決策を探し始めました。 on をイベントにバインドするとバブリングが防止されないことが判明したので、コードに return false を追加しました。バブリングを防止した後、イベントは正常に実行されました。コードは次のとおりです。

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

ログイン後にコピー

これまでのところ、コードは正常に実行できます。問題の原因は泡立っていることですが、ブロガーは最初は間違った方向を見ていました。
ただし、バブリングを防ぐメソッドは return false だけではなく、event.stopPropagation() にも違いがあります。簡単に言えば、
event.stopPropagation() はイベントのバブリングを防ぎます。イベント自体は阻止しません。
return false は、イベントのバブルアップを阻止するだけでなく、イベント自体もブロックします。
これら 2 つの方法の違いについて詳しくは、関連情報をご覧ください。