web-dev-qa-db-ja.com

jQueryのバインドメソッドとライブメソッドの違いは何ですか？

バインド関数とライブ関数の違いを知りたいです。

私には、それらはほとんど同一のようです。

ライブ/バインドメソッドの利点 を読みましたが、違いについては教えてくれませんでした...

ありがとう！

jquerybindlive
65
Kevin Brown

.bind（）は、呼び出しが行われたときに存在するか、セレクターに一致する要素にイベントを添付します。後で作成された要素、またはクラスが変更されたために今後一致する要素は、バインドされたイベントを発生させません。

.live（）は、既存および将来のマッチング要素に対して機能します。 jQuery 1.4以前は、これはクリック、dblclick、マウスダウン、マウスアップ、マウスムーブ、マウスオーバー、マウスアウト、キーダウン、キープレス、キーアップのイベントに限定されていました。

77
ichiban

つまり、.bind()は、jQueryオブジェクトで現在選択しているアイテムにのみ適用されます。 .live()は、現在のすべての一致する要素と、将来追加する可能性のあるすべての要素に適用されます。

それらの根本的な違いは、live()が event bubbling を使用することです。つまり、ボタンをクリックすると、そのボタンが_<p>_、_<div>_、_<body>_要素に存在する場合があります。つまり、実際には、これらすべての要素を同時にクリックしていることになります。

live()は、イベントハンドラーをelementではなく、documentにアタッチすることで機能します。前に示したように、そのボタンをクリックすると、ドキュメントは同じクリックイベントを受け取ります。次に、イベントのターゲットとなる要素の行を検索し、クエリのいずれかに一致する要素があるかどうかを確認します。

この結果は2つあります。1つ目は、イベントが発生すると暗黙的に追加されるため、新しい要素にイベントを再適用し続ける必要がないことを意味します。ただし、さらに重要なことは（状況によって異なります）、コードがはるかに軽量であることを意味します！ページに50個の_<img>_タグがあり、このコードを実行する場合：

_$('img').click(function() { /* doSomething */ });
_

...その関数は、これらの各要素にcopiedされます。ただし、このコードがある場合：

_$('img').live('click', function() { /* doSomething */ });
_

...その関数は（ドキュメントの）1か所にのみ保存され、イベント時にクエリに一致するものに適用されます。

ただし、このバブリング動作のため、すべてのイベントをこの方法で処理できるわけではありません。いちばん指摘したように、これらのサポートされるイベントは、クリック、dblclick mousedown、mouseup、mousemove、mouseover、mouseout、keydown、keypress、keyupです。

90
nickf

これをよく読んでください： http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

最近では（jQuery 1.7以降）.on（）関数を使用して非推奨になりました- http://api.jquery.com/on/

5
Jeff Maes

Bindは、呼び出し時に現在のDOMで一致するすべてのイベントを、指定されたパターンにバインドします。 Liveは、イベントが変更された場合でも、現在のDOMの指定されたパターンとDOMの将来の一致にイベントをバインドします。

たとえば、$（ "div"）。bind（ "hover"、...）をバインドすると、その時点でDOM内のすべての "div"に適用されます。その後、DOMを操作して余分な「div」を追加すると、そのホバーイベントがバインドされなくなります。 bindの代わりにliveを使用すると、イベントが新しいdivにもディスパッチされます。

5
Rob Beardow

このシナリオを想像してください：

  1. 私はいくつかの_<img>_要素を持っています。
    • $('img').bind('click', function(){...});
    • いくつかの余分な画像を追加する（get()、またはhtml()などを使用）
    • 新しい画像にはバインディングがありません!!

もちろん、ステップ2で$('img')...を実行したときに新しいイメージが存在しなかったため、イベントハンドラーをそれらにバインドしませんでした。

今、あなたがこれを行う場合：

  1. 私はいくつかの_<img>_要素を持っています。
    • $('img').live('click', function(){...});
    • いくつかの余分な画像を追加する（get()、またはhtml()などを使用）
    • 新しい画像doバインディングがあります!!

マジック？ほんの少し。実際、jQueryは汎用イベントハンドラーをDOMツリーの上位にある別の要素にバインドし（ボディ？ドキュメント？アイデアはありません）、イベントをバブルアップさせます。汎用ハンドラーに到達すると、live()イベントと一致するかどうかを確認し、一致する場合は、live()呼び出しの前または後に要素が作成されたかどうかに関係なく、それらが発生します。

4
Javier

彼らが言ったことに加えて、いつでもどこでもbindに固執し、必要なときだけliveを使用するのが最善だと思います。

3
andi

これらすべてのjQueryメソッドは、イベントをセレクターまたは要素にアタッチするために使用されます。しかし、それらはすべて互いに異なっています。

。bind（）：これは、イベントをバインドする最も簡単で迅速な方法です。ただし、bind（）の問題は、同じセレクタに一致する動的に追加された要素では機能しないことです。 bind（）は、将来の要素ではなく現在の要素にのみイベントを添付します。その上、大規模な選択を処理するときにパフォーマンスの問題もあります。

。live（）：このメソッドはbind（）の欠点を克服します。動的に追加された要素または将来の要素に対して機能します。大きなページでのパフォーマンスが低いため、このメソッドはjQuery 1.7で非推奨になり、使用を中止する必要があります。このメソッドを使用したチェーンは適切にサポートされていません。

詳細はこちら こちら

1
Rahul Kumar

ライブ効果を得る方法はありますが、その種類は厄介です。

$（this）.unbind（ 'mouseout'）。bind（ 'mouseout'、function（）{}）;

これにより、以前のバージョンがクリアされ、新しいバージョンがリセットされます。時間の経過とともに、私にとってはうまくいくように思えました。

0
David

Liveとlivequeryの違いは ここで説明 です。

0
Roger

私自身の愚かさのために少しデバッグしなければならなかった後、私はこれに追加したかったです。ページのボタンのクラスに.live（）を適用しました。クエリ文字列で渡そうとしている正しいIDをレンダリングし、ajax呼び出しでやりたいことを実行すると仮定しました。私のアプリには、インベントリアイテムに関連付けられたボタンが動的に追加されています。たとえば、「コーク」ボタンまでカテゴリをドリルダウンして、コークスを注文に追加します。もう一度上からドリルダウンし、「BUDLITE」を追加します-毎回AJAX呼び出しでこれらのアイテムをテーブルに入力したかったです。

ただし 、. live（）をボタンのクラス全体にバインドしているため、作成した各ajax呼び出しを記憶し、後続のボタンごとに再起動します！バインドとライブの違いがはっきりしていなかったので少しトリッキーでした（そして、上記の答えはそれについてクリスタルです）。 。

0
ChrisM