87

現在、クリックが発生したときに何かをする必要があるときにjQueryを使用すると、次のようになります...

$(".close-box").click( function() {
    MoneyBox.closeBox();
    return false;
});

私は他の誰かがプロジェクトに持っているコードを見ていましたが、彼らはこのようにしています...

$(".close-box").live("click", function () {
    MoneyBox.closeBox();
    return false;
});

私が知る限り、同じことをしているように見えることに注意してください。ただし、現在非推奨の live() 関数を使用していて、jQuery ドキュメントではon()代わりに使用するように言われていますが、どちらにしても、最初の例の代わりに live/on() を使用するのはなぜですか?

4

10 に答える 10

153

動的に生成された要素 (たとえば、AJAX 呼び出しからのもの) がある可能性があるため、以前に同じ要素セレクターにバインドされていた同じクリック ハンドラーが必要な場合があります。次にon()、セレクター引数を使用してクリック イベントを "デリゲート" します。

デモンストレーションするには：

http://jsfiddle.net/AJRw3/

on()click()セレクターが指定されていない場合は、と同義にすることもできます。

$('.elementClass').click(function() { // code 
});

と同義です

$('.elementClass').on('click', function() { // code
});

class を持つすべての要素にハンドラーを 1 回だけ追加するという意味でelementClass。elementClassたとえば、新しい要素がある場合$('<div class="elementClass" />')、ハンドラーはその新しい要素にバインドされないため、次のことを行う必要があります。

$('#container').on('click', '.elementClass', function() { // code
});

#containerが.elementClassの祖先であると仮定する

于 2012-04-10T01:43:05.980 に答える
40

たくさんの答えがあり、それぞれがいくつかの点に触れています - うまくいけば、これがあなたの答えを与え、何が何で、どのようにそれを使用するかについての良い説明を与えることができます.

Usingclick()は のエイリアスbind('click' ...)です。Usingbind()は、イベント リスナーが設定されているときに DOM をそのまま取得し、DOM 内の一致する各要素に関数をバインドします。つまり、使用する$('a').click(...)場合は、そのコードの実行時に見つかった DOM 内のすべてのアンカー タグのクリック イベントに提供された関数をバインドします。

使用live()は jQuery の古い方法でした。と同じようにイベントをバインドするために使用されましたがbind()、コードの実行時にイベントを DOM 内の要素にバインドするだけではありません。DOM の変更もリッスンし、将来的に一致する要素にもイベントをバインドします。これは、DOM 操作を行っていて、後で DOM に削除/更新/追加される可能性があるが、DOM が最初にロードされたときには存在しない要素にイベントが存在する必要がある場合に便利です。

現在減価償却されている理由live()は、実装が不十分だったためです。を使用するにはlive()、最初にDOMで少なくとも1つの要素を選択できる必要がありました（私は信じています）。また、関数のコピーが各要素にバインドされるように実行されました。1000 個の要素がある場合、それは多くの関数がコピーされたことになります。

関数の作成は、on()それらの問題を克服することでした。on()単一のイベントリスナーを、DOM で変更されないオブジェクトにバインドし (そのため、後で DOM に削除/追加される要素には使用できません- 親オブジェクトにバインドします)、単純に適用できます。セレクターに一致する要素にバブルアップされた場合にのみ関数が実行されるようにする要素「フィルター」。これは、存在する関数が 1 つだけ (コピーの束ではなく) 1 つの要素にバインドされていることを意味します。これは、DOM に「ライブ」イベントを追加するためのはるかに優れた方法です。

...そして、それが違いであり、各機能が存在する理由live()と減価償却される理由です。

于 2012-04-10T02:08:27.453 に答える
19
  • $("a").live()--> これ<a>が呼び出された後に作成された場合でも、すべてに適用されます。
  • $("a").click()<a>--> これが呼び出される前のすべてにのみ適用されます。(これは、 1.7のbind()とのショートカットです)on()
  • $("a").on()--> イベント ハンドラーをアタッチするために必要なすべての機能を提供します。(jQuery 1.7 で最新)

引用符:

jQuery 1.7 以降、.live() メソッドは非推奨になりました。.on() を使用して、イベント ハンドラーをアタッチします。古いバージョンの jQuery のユーザーは、.live() よりも .delegate() を使用する必要があります。
このメソッドは、デリゲートされたイベント ハンドラーをページのドキュメント要素にアタッチする手段を提供します。これにより、コンテンツがページに動的に追加されるときのイベント ハンドラーの使用が簡素化されます。詳細については、.on() メソッドの直接イベントと委任イベントの説明を参照してください。

.on() メソッドは、jQuery オブジェクトで現在選択されている要素のセットにイベント ハンドラーをアタッチします。jQuery 1.7 以降、.on() メソッドは、イベント ハンドラーをアタッチするために必要なすべての機能を提供します。

以前のバージョンでは、.bind() メソッドを使用して、イベント ハンドラーを要素に直接アタッチしていました。

于 2012-04-10T01:39:32.310 に答える
7

click()の非委任メソッドへのショートカットですon()。そう：

$(".close-box").click() === $(".close-box").on('click')

でイベントを委任するにはon()、つまり。動的に作成されたオブジェクトでは、次のことができます。

$(document).on('click', '.close-box') // Same as $('.close-box').live()

ただし、単にそうするだけでon()なく、静的要素に委任を導入します。documentlive()

$("#closestStaticElement").on('click', '.close-box')
于 2012-04-10T01:42:57.587 に答える
4

との違いliveをbindよく読んでください。

簡単に言えば、liveイベント委任を使用して、現在および将来存在する要素にバインドできるようにします。

対照的に、bind(およびそのショートカットなどのclick) 経由でアタッチされたハンドラーは、セレクターに一致する DOM 要素にハンドラーを直接アタッチするため、現在存在する要素にのみバインドされます。

の柔軟性の結果としてliveパフォーマンスが低下するため、提供される機能が必要な場合にのみ使用してください。

于 2012-04-10T01:39:14.977 に答える
3

$el.click(fn)のショートカットです$el.on('click', fn)

詳細については、 http ://api.jquery.com/click/およびhttp://api.jquery.com/on/を参照してください。

于 2012-04-10T01:42:40.800 に答える
2

いくつかのイベント ハンドラーをバインドする必要がある場合は、 (非推奨)dynamically added elementsを使用するか、それを機能させる必要があります。DOMに動的に追加された要素では機能しません。liveon$('element').click(...);

jQuery の .bind()、.live()、および .delegate() の違いの詳細。

于 2012-04-10T01:41:12.657 に答える
1

この.on()メソッドは、jQueryオブジェクトで現在選択されている要素のセットにイベントハンドラーをアタッチします。このclick()メソッドは、イベントハンドラーを「クリック」JavaScriptイベントにバインドするか、要素でそのイベントをトリガーします。

プレーン.click(...では、セレクターのターゲットがオンザフライで変更された場合（たとえば、いくつかのajax応答を介して）、動作を再度割り当てる必要があります。

これ.on(...は非常に新しく（jQuery 1.7）、委任されたイベントを使用してライブシナリオをカバーできます。これは、とにかく動作をアタッチするためのより高速な方法です。

于 2012-04-10T01:46:05.963 に答える
1

$.click() は bind または on の単なるショートカットです。jQuery ドキュメントから:

最初の 2 つのバリエーションでは、このメソッドは .bind("click", handler) のショートカットであり、jQuery 1.7 以降では .on("click", handler) のショートカットでもあります。3 番目のバリエーションでは、.click() が引数なしで呼び出されると、.trigger("click") のショートカットになります。

于 2012-04-10T01:39:48.663 に答える