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

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

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

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

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

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

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

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

$(selector).unbind(event,function)

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

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

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

関連する推奨事項:

js インデックスの添字 li コレクションのバインディング クリック イベントの例の共有について

jQuery は Enter キーが押されたときにバインディング クリック イベントを実装する_jquery

JavaScript はボタンをバインドするクリック イベント (onclick) メソッド_javascript スキル

以上がjQueryのバインディングクリックイベントが2回実行される問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。