jQueryでの.die()と.live()の使い方の詳細な説明

多くの開発者は jQuery の .live() メソッドを知っていますが、ほとんどの開発者はこの 関数 が何をするかは知っていますが、その実装方法は知らないため、それほど使いやすいものではありません。そして、彼らは .live()event をアンバインドする .die() メソッドについて聞いたこともありません。たとえこれに精通していても、.die() をご存知ですか?

.live() とは
.live メソッドは、イベントを DOM 要素にバインドできることを除いて、.bind() に似ています。まだ存在しない DOM 要素にイベントをバインドできます。次の例を見てください:

ユーザーがリンクをクリックしたときに、サイトから離れることを通知したいとします。

$(
document
).ready( function() { 
$('a').click( function() { 
alert("You are now leaving this site"); 
return true; 
}); 
});

.click() は、より一般的な .bind() を実装するための単純なメソッドであることに注意してください。 以下および上記のコードは、上記の実装と同等です。

そうです

しかし、今度はjavascriptを介してページへのリンクを追加してください。

$(document).ready( function() { 
$('a').bind( 'click', function() { 
alert("You are now leaving this site"); 
return true; 
}); 
});

ただし、クリック イベントをページのすべての ノードにバインドするとリンクが存在しないため、ユーザーがリンクをクリックしてもメソッドは呼び出されません。そのため、代わりに .live( ) を使用します。 of .bind():

$(&#39;body&#39;).append(&#39;<p><a href="...">Check it out!</a></p>&#39;);

これで、ページに新しいリンクを追加すると、バインディングも機能するようになります。

.live() 仕組み
.live() の背後にある魔法は、イベントを選択した要素にバインドするのではなく、実際には DOM ツリーのルート ノードにバインドすることです (例では $(document )) ですが、パラメータのように要素に渡されます。

つまり、要素をクリックすると、クリック イベントはルート ノードに到達するまで DOM ツリーを上に渡されます。この .click() イベントの trigger は、ルート ノードの .live() によって作成されています。このトリガー メソッドは、まず、クリックされたターゲットが .live() によって呼び出されるセレクターと一致するかどうかを確認します。したがって、上記の例では、クリックされた要素が $('a').live() の $('a') と一致するかどうかがチェックされ、一致する場合はバインディング メソッドが実行されます。

ルート ノード内で何をクリックしても、ルート ノードの .click() イベントがトリガーされ、ルート ノードに追加された要素をクリックするとこのチェックが行われるためです。

すべての .live() は .die() になる可能性があります
.bind() を知っているなら、間違いなく .unbind() も知っています。次に、.die() と .live() も同様の関係になります。上記のバインディングにアクセスするには (ユーザーがリンクをクリックしたときにダイアログ ボックスがポップアップしないようにするため)、これを行います:

$(document).ready( function() { 
$('a').live( 'click', function() { 
alert("You are now leaving this site"); 
return true; 
}); 
});

より具体的には、バインドされ保持する必要がある他のイベントがある場合は、ホバーなど、クリック イベント バインディングのブロックを解除するだけです。

$('a').die();

具体的には、メソッド名が定義されていれば、指定したメソッドのバインドを解除することができます。

$('a').die('click');

.die() についての質問
これらの関数を使用する場合、.die() メソッドには欠点があります。 .live() メソッドで使用される 要素セレクター のみを使用できます。たとえば、次のように記述することはできません。

specialAlert = function() { 
alert("You are now leaving this site"); 
return true; 
} 
$(document).ready( function() { 
$('a').live( 'click', specialAlert ); 
$('a').live( 'click', someOtherFunction ); 
}); 
// then somewhere else, we could unbind only the first binding 
$('a').die( 'click', specialAlert );

.die() イベントは、ターゲットの選択に一致するように見え、.live ( ) バインディングですが、実際には $('a.no-alert') にはバインディングがないため、jquery はそれを削除するバインディングを見つけることができず、機能しません。
さらに悪いのはこれです:

$(document).ready( function() { 
$('a').live( 'click', function() { 
alert("You are now leaving this site"); 
return true; 
}); 
}); 
// it would be nice if we could then choose specific elements 
// to unbind, but this will do nothing 
$('a.no-alert').die();

.die() を修正する方法

次回の記事では、ポスト互換のトーン動作を提供できる .die() の新しい実行方法を提案します。おそらく時間があれば、jQuery コア開発チームに私の提案を受け入れて、次のリリースで変更を加えるように提案します。オプションのコンテキスト パラメーターを含め、カスタム ノードを接続できるように、今書いたメソッドをさらに追加したいと考えています。イベント、およびルート ノードではありません。

さらに詳しい情報と例が必要な場合は、jQuery .live() と .die() のドキュメントを確認してください。

.delegate() と .undelegate() にも注意してください。これらは .live() を置き換えることができます。 .die() と .die() は密接に関連しています。

以上がjQueryでの.die()と.live()の使い方の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。