1

私は次のようなものを持っています：

function init(){
  $('.btn').click(function(){
    //do something;
  }
}

そして、新しいコンテンツがajaxを介して追加されるとき、私はを呼び出しているinit()ので、クリックイベントは新しいボタンに適用されます。しかし、一度クリックすると、数回のクリックがキャプチャされます（私が呼び出した回数だけinit()）。それは理にかなっていますが、それを回避する方法は？

jsFiddleリンク：http ：//jsfiddle.net/s2ZAz/8/


解決策：
* $ .delegate（）を使用します-http: //api.jquery.com/delegate/
* $ .live（）を使用します-http://api.jquery.com/live/あまり

好ましくありませんが、それでも解決策：
* $ .off（）を使用します-http: //api.jquery.com/off/または$ .unbind（）-http: //api.jquery.com/unbind/

4

4 に答える 4

2

このメソッドを使用しunbindて、イベントハンドラー（またはoffハンドラーをアタッチするための新しいjQuery 1.7構文を使用している場合はメソッド）を削除できます。

さらに良いことに、このliveメソッドを使用して、将来ページに追加され、指定されたセレクターと一致する要素のイベントハンドラーを設定できます。このようにして、initを1回呼び出すだけで済みます。

于 2011-12-04T19:09:25.290 に答える
2

click「セレクターに一致するすべてのオブジェクトについて、このクリックリスナーを接続します」と言います。delegate「このセレクターに一致するすべてのオブジェクトについて、このリスナーを接続する」というようなものが必要になる可能性があります。

$(document).delegate('button', 'click', function() {
});

2回呼び出すと、引き続き2回のコールバックが発生しますinitが、この方法では、 2回呼び出す必要はありませんinit。新しいオブジェクトが追加されると、それらはすでにクリックリスナーに割り当てられているためです。

document以下のGregのコメントに従って、上記は最も近い永続的な祖先に置き換える必要があることに注意してください。

デモ。

jQuery 1.7以降、この関数を使用し.on()て同じ効果を実現できることが望ましいです。

デモ。

于 2011-12-04T19:10:08.160 に答える
1 
$("body").delegate("button", "click", function() {
    alert('I\'m annoying!');
});

$('div').append("<button>Click me, I will alert twice</button><br/>");

$('div').append("<button>Click me, I will alert once</button><br/>");

$('div').append("<button>Click me, I will not alert at all</button><br/>");

やってみよう

于 2011-12-04T19:10:15.380 に答える
0

Davidが述べたように、そしてlihoの代理人の例（フィドルがアラートがポップする回数をカスケードする方法が大好きです!!）によると、問題は複数のバインディングにあり、.live()（非推奨）または.delegate()（段階的に廃止）で解決できます、または.on()（推奨）。ただし、パフォーマンスの観点から、ドキュメントまたはbodyノードのリッスンを委任するのは間違いです。

これを行うためのより良い方法は、決して破壊されないボタンの祖先を特定することです。body簡単な選択ですが、ほとんどの場合、ある種のラッパー要素を使用してページを作成します。ラッパー要素は、1つ以上のレベルより深くネストされているbodyため、設定できるリスナーの数を減らすことができます。

HTML：

<div id="someWrapper">
  <div class="somethingThatGetsDestroyed">
    <button>Click Me</button>
  </div>
</div>

jQuery 1.7以降を使用するJS：

$('#someWrapper').on('click', 'button', function() {
  alert('Clickity-click!');
});
于 2011-12-04T19:26:28.063 に答える