javascript - jQueryの`bind`または`on`イベントハンドラーをべき等にする方法

Question

$(selector).bind('click', handler)ハンドラーが1回だけ接続されるように、または$(selector).on('click', handler)複数回呼び出すことができる方法はありますか？

現在、成功コールバックが異なる複数のAJAXハンドラーがあり、それぞれがページ上の異なる要素のセットを再レンダリングします。理想的には、「イベントの再アタッチ」ルーチンを、すべてのルーチンではなく、単一の関数にリファクタリングしたいと思います。

今これを行うために私が考えることができる唯一の方法は、明示的にバインドを解除することです。たとえば、次のようになります。

$(selector).off('click');
$(selector).on('click', handler);

そのようなことを自動的に行う方法を探しています。

score 5 · Accepted Answer

より良いアプローチは、.on呼び出しをコンテナーに移動することです。コンテナがある場合、は.on残り、セレクタに一致する既存または新しい子に適用されます。

$(container-selector).on("click", "element-selector", function(event){
// do stuff
});

乾杯。

score 4 · Accepted Answer

イベントハンドラーの名前空間を指定してから、バインドする前に必ずバインドを解除してください。

$('#something').unbind("click.some-feature").bind("click.some-feature", function() { ... });

これを自動的に行う独自の jQuery 関数を作成できます。

$.fn.schneiderBind = function(name, fn) {
  return this.unbind(name).bind(name, fn);
});

$('#something').schneiderBind("click", function() { ... });

または、バブリングと委譲を使用して、動的更新の影響を受けない時点で DOM の上位にバインドすることもできます。

score -1 · Accepted Answer

$(document).on("click","selector", function() {  code goes here... });

これは、動的に追加されたオブジェクトで機能します

3 に答える 3