バインド関数とライブ関数の違いを知りたいです。
私には、それらはほとんど同じように見えます。
ライブ/バインドメソッドの利点を読みましたが、違いについては教えてくれませんでした...
ありがとう!
つまり.bind()
、jQuery オブジェクトで現在選択しているアイテムにのみ適用されます。.live()
は、現在一致しているすべての要素と、今後追加する可能性のある要素に適用されます。
それらの根本的な違いは、イベント バブリングlive()
を利用することです。つまり、ボタンをクリックすると、そのボタンは要素内に存在する可能性があります。実際には、これらの要素すべてを同時にクリックしていることになります。<p>
<div>
<body>
live()
要素ではなく、ドキュメントにイベント ハンドラをアタッチすることで機能します。そのボタンをクリックすると、前に示したように、ドキュメントは同じクリック イベントを受け取ります。次に、イベントの対象となる要素の行を調べて、それらのいずれかがクエリと一致するかどうかを確認します。
この結果は 2 つあります。まず、イベントが発生すると暗黙的に追加されるため、イベントを新しい要素に再適用し続ける必要がないことを意味します。ただし、さらに重要なことは (状況によって異なりますが)、コードがはるかに軽量になることです。ページに 50 個<img>
のタグがあり、次のコードを実行するとします。
$('img').click(function() { /* doSomething */ });
...次に、その関数がそれらの各要素にコピーされます。ただし、次のコードがある場合:
$('img').live('click', function() { /* doSomething */ });
...その関数は 1 か所 (ドキュメント上) にのみ格納され、イベント時にクエリに一致するものすべてに適用されます。
ただし、このバブリング動作のため、すべてのイベントをこの方法で処理できるわけではありません。Ichiban が指摘したように、これらのサポートされているイベントは、click、dblclick mousedown、mouseup、mousemove、mouseover、mouseout、keydown、keypress、keyup です。
.bind()は、呼び出しが行われたときにセレクターに存在するか一致する要素にイベントを付加します。後で作成された要素、またはクラスが変更されたために今後一致する要素は、バインドされたイベントを発生させません。
.live()は、既存および将来の一致する要素に対して機能します。jQuery 1.4より前では、これは次のイベントに制限されていました:click、dblclick mousedown、mouseup、mousemove、mouseover、mouseout、keydown、keypress、keyup
Bind は、呼び出した時点で現在の DOM 内のすべての一致に対して、指定されたパターンにイベントをバインドします。Live は、イベントを現在の DOM の指定されたパターンと、DOM 内の将来の一致 (変更された場合でも) にバインドします。
たとえば、 $("div").bind("hover", ...) をバインドすると、その時点で DOM 内のすべての "div" に適用されます。その後、DOM を操作して追加の「div」を追加すると、そのホバー イベントはバインドされません。bind の代わりに live を使用すると、イベントが新しい div にもディスパッチされます。
これを読んでください:http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/
現在 (jQuery 1.7 以降) .on() 関数を使用して非推奨になっています - http://api.jquery.com/on/
このシナリオを想像してください:
<img>
要素を持っています。
$('img').bind('click', function(){...});
get()
、またはhtml()
、何かを使用)もちろん、ステップ 2 を実行したときに新しいイメージが存在しなかったため$('img')...
、イベント ハンドラーをそれらにバインドしませんでした。
今、これを行うと:
<img>
要素を持っています。
$('img').live('click', function(){...});
get()
、またはhtml()
、何かを使用)マジック?少しだけ。実際、jQuery は一般的なイベント ハンドラーを DOM ツリーの上位にある別の要素 (本文? ドキュメント? わかりません) にバインドし、イベントをバブルアップさせます。汎用ハンドラーに到達すると、live()
イベントと一致するかどうかを確認し、一致する場合は、要素が呼び出しの前または後に作成されたかどうかに関係なく、イベントが発生しlive()
ます。
彼らが言ったことに加えて、bind
いつ/どこでできるかに固執し、live
必要なときにだけ使用するのが最善だと思います.
これらすべての jQuery メソッドは、イベントをセレクターまたは要素にアタッチするために使用されます。しかし、それらはすべて互いに異なります。
.bind():これは、イベントをバインドする最も簡単で迅速な方法です。ただし、bind() の問題は、同じセレクターに一致する動的に追加された要素に対しては機能しないことです。bind() は、将来の要素ではなく、現在の要素にのみイベントを添付します。その上、大きな選択を扱うときのパフォーマンスの問題もあります。
.live():このメソッドは、bind() の欠点を克服します。動的に追加された要素または将来の要素に対して機能します。大規模なページでのパフォーマンスが低いため、このメソッドは jQuery 1.7 で廃止され、使用を中止する必要があります。このメソッドを使用すると、連鎖は適切にサポートされません。
詳細はこちら
私自身の愚かさのために少しデバッグしなければならなかった後、これに追加したかったのです。ページのボタンのクラスに .live() を適用しました。これは、クエリ文字列に渡そうとしていた正しい ID をレンダリングし、ajax 呼び出しでやりたいことを実行すると仮定しました。私のアプリには、インベントリ アイテムに関連付けられたボタンが動的に追加されています。たとえば、カテゴリを [COKE] ボタンまでドリルダウンして、注文にコーラを追加します。もう一度上からドリルダウンして、「BUDLITE」を追加します。これらのアイテムを AJAX 呼び出しを介してテーブルに入力するたびに。
ただし、ボタンのクラス全体に .live() をバインドしたため、作成した各 ajax 呼び出しが記憶され、後続の各ボタンに対して再起動されます。bind と live の違いがよくわからなかったので少しトリッキーでした (そして上記の答えはそれについてのクリスタルです)。 .
ライブ効果を得る方法はありますが、そのような厄介なものです。
$(this).unbind('mouseout').bind('mouseout',function(){ });
これにより、以前のものがクリアされ、新しいものがリセットされます。時間が経つにつれて、私にとってはうまくいったようです。
live と livequery の違いについては、こちらで説明しています。