0

コンテンツが動的なモーダルがあり、このモーダルには拒否ボタンがあります。

このモーダル自体はリンクを介して動的に生成されるため、デリゲートを使用する必要があります

$( "body" ).delegate( ".reject", "click", function(e) {
     $(".modalInfo").hide();
     $(".modalReject").show();
     someFunction();
});

ユーザーが拒否ボタンをクリックしてモーダルを閉じたとします。次に、新しいモーダルをロードすると、このモーダルのコンテキストが変化し、新しい拒否ボタンが表示されます。

ユーザーがこの新しいコンテキストで拒否ボタンを再度クリックすると、何らかの方法で someFunction() が 2 回実行されました。1 回目は元のクリックから、2 回目はこの新しいクリックからです。もう一度モーダルを閉じ、新しいコンテキストをロードし、クリックを実行して出来上がり.. 3 つの someFunction() 呼び出しを取得しました!

いくつかの調査の後、これが私が見つけたものです：要素を置き換えると、イベントとデータに何が起こるか

これを防ぐ方法は？

4

1 に答える 1

1

まず、.rejectすべてのダイアログのボタンがすべて同じ動作とクラス名を持っている場合、1 つの委任されたイベント ハンドラーをそのままにしておくことができ、再度インストールしたり、前のものを削除したりする必要はありません。委任されたイベント処理を使用する利点は、ターゲット オブジェクトが行き来でき、イベント ハンドラーが適切な場所にとどまるということです。

元のイベント ハンドラーを削除して別のものに置き換える理由があり、.on()代わりに.delegate()(jQuery 1.7+ での現在の方法) を使用するように切り替える場合は、次のようにすることができます。

$(document.body).on("click", ".reject", function(e) {
     $(".modalInfo").hide();
     $(".modalReject").show();
     someFunction();
});

.off()次に、次のようにイベント ハンドラーをアンインストールできます。

$(document.body).off("click", ".reject");

または、そのイベントとセレクターの委任されたイベント ハンドラーを 1 つだけ削除する場合は、関数を個別に宣言してから、同じ関数を と の両方に渡す必要があり.on()ます.off()。

function myHandler(e) {
    $(".modalInfo").hide();
    $(".modalReject").show();
    someFunction();
}

$(document.body).on("click", ".reject", myHandler);

.off()次に、次のようにして、その単一のイベント ハンドラーだけをアンインストールできます。

$(document.body).off("click", ".reject", myHandler);

参考までに、jQuery 1.7 以降.delegate()に取って代わられました。.on()

于 2013-09-26T01:38:34.077 に答える