0

HTMLの同じ部分を変更するために多くのajax呼び出しを行う状況にあります。この html はグリッドを表します。ajax 呼び出しで html を変更した後、イベント ハンドラーをグリッドのイベントにアタッチします。ユーザーが更新ボタンをクリックすると、新しい html コードを設定する同じ ajax 呼び出しを実行し、グリッドのイベントをリッスンするイベント ハンドラーを再度追加します。

前のイベント ハンドラーがまだメモリ内にある場合、グリッドを更新して新しいイベント ハンドラーを追加するたびに知りたいのですが、そうである場合、この状況でのベスト プラクティスは何ですか? (たとえば、新しい html を配置する前に、存在する場合はイベント ハンドラーのバインドを解除します)

これが私がすることの例です：

$.get(this.config.actionLoggingUserListUrl, viewModel, function (data) {
    MyNamespace.ui.hideGridAnimation($("#LoggingActionUsersList"));

    if (data.success) {
        $("#validationSummary").html("");

        $("#usersList").html(data.result);

        $("#LoggingActionUsersList").click(function() {
            console.log("Here is my event handler attached multiple times!");
        });
    }
    else {
        $("#validationSummary").html(data.result);

        $("#usersList").html("");
    }
});

この場合、私が話しているイベント ハンドラーは次のとおりです。

$("#LoggingActionUsersList").click(function() {
   console.log("Here is my event handler attached multiple times!");
});
4

2 に答える 2

1

電話をかけるたびにバインドするのはなぜですか？

毎回スタックに追加しています。あなたはそれを交換していません。最善の解決策は、 on を使用して一度実行することです。

他の解決策は、クリック イベントを追加する前に、クリック イベントのバインドを解除することです。このソリューションの問題は、他の何かがクリックイベントを追加した場合、それを削除したことです。

于 2012-08-23T16:40:50.273 に答える
1

イベント ハンドラーがスタックするので、これはメモリークです。おそらくかなり取るに足らないものですが、効果よりも原則です。なんらかの理由で動的イベント ハンドラー (現実的な用途があまりないため、めったに使用されないもの) が本当に必要でない限り、イベント ハンドラーの割り当てを ajax 呼び出しから引き出すことを強くお勧めします。

イベント ハンドラーを変更する必要がある場合は、イベント ハンドラーを、それが割り当てられているオブジェクトについて少しだけ認識できるようにすることをお勧めします。そうすれば、毎回新しいイベントを追加する代わりに、オブジェクトの現在の ID に基づいて、イベント ハンドラーのロジックでさまざまなことを行うことができます。

于 2012-08-23T16:48:08.167 に答える