ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery の .live() および .die()_jquery の使用の概要
jQuery の .live() および .die()_jquery の使用の概要
- WBOYオリジナル
- 2016-05-16 18:02:301133ブラウズ
.live() とは
.live メソッドは、イベントを DOM 要素にバインドできる点を除き、.bind() と似ています。これはまだ存在しません。次の例を見てください。
ユーザーがリンクをクリックしたときにサイトから離れることを示したいとします。
$(document).ready( function( ) {
$('a').click( function() {
alert("あなたは今このサイトを離れています");
return true;
}); ;
.click() は、より一般的な .bind() を実装するための単なるメソッドであることに注意してください。以下のコードと上記の実装は同じです。
'); .live メソッドは、イベントを DOM 要素にバインドできる点を除き、.bind() と似ています。これはまだ存在しません。次の例を見てください。
ユーザーがリンクをクリックしたときにサイトから離れることを示したいとします。
コードをコピー コードは次のとおりです。
$(document).ready( function( ) {
$('a').click( function() {
alert("あなたは今このサイトを離れています");
return true;
}); ;
コードをコピー コードは次のとおりです。
$(document).ready( function( ) {
$('a').bind( 'click', function() {
alert("あなたは今このサイトを離れています");
return true;
}); 🎜>} );
ただし、JavaScript を使用してページへのリンクを追加します。
$('a').bind( 'click', function() {
alert("あなたは今このサイトを離れています");
return true;
}); 🎜>} );
ただし、JavaScript を使用してページへのリンクを追加します。
コードをコピー コードは次のとおりです。
$('body').append( '< div>チェックしてください!ただし、ユーザーがクリックするとそのリンクでは、クリック イベントをページ上のすべての ノードにバインドするときにリンクが存在しないため、メソッドは呼び出されません。そのため、.bind() を .live() に置き換えます。 🎜>
コードをコピーします
コードは次のとおりです: $(document).ready( function() { $('a ').live( 'click', function() {
alert("あなたは今このサイトを離れています"); return true;
}); ;
これで、ページに新しいリンクを追加すると、バインドも機能します。
.live() 仕組み
.live() の背後にある魔法は、イベントを選択した要素にバインドするのではなく、実際にはノード (.例では $(document))、パラメータのように要素に渡されます。
}); ;
これで、ページに新しいリンクを追加すると、バインドも機能します。
.live() 仕組み
.live() の背後にある魔法は、イベントを選択した要素にバインドするのではなく、実際にはノード (.例では $(document))、パラメータのように要素に渡されます。
次に、要素をクリックすると、クリック イベントはルート ノードに到達するまで DOM ツリーを上に渡されます。この .click() イベントのトリガーは、ルート ノードの .live() によって作成されています。このトリガー メソッドは、まず、クリックされたターゲットが .live() によって呼び出されるセレクターと一致するかどうかを確認します。したがって、上記の例では、クリックされた要素が $('a').live() の $('a') と一致するかどうかがチェックされ、一致する場合はバインディング メソッドが実行されます。
ルート ノード内で何をクリックしても、ルート ノードの .click() イベントがトリガーされ、ルート ノードに追加された要素をクリックするとこのチェックが行われるためです。
すべての .live() は .die() になる可能性があります
.bind() を知っているなら、必ず .unbind() も知っています。次に、.die() と .live() も同様の関係になります。上記のバインディングにアクセスするには (ユーザーがリンクをクリックしたときにダイアログ ボックスがポップアップしないようにするため)、次の操作を行います:
コードをコピー
コードは次のとおりです: $('a').die(); より具体的には、バインドされている必要がある他のイベントがある場合ホバーなどのイベントを保持するには、クリック イベントのバインドを解除することのみが可能です。
コードをコピー
コードは次のとおりです:$('a').die('click' ); 具体的には、メソッド名が定義されている場合、指定されたメソッドのバインドを解除できます。
コードをコピー
コードは次のとおりです。 specialAlert = function() { alert(" あなたは現在このサイトを離れています"); return true
} $(document).ready( function() {
$('a').live( 'click ',specialAlert );
$('a').live( 'click', someOtherFunction )
// その後、最初のバインディングのみをアンバインドできます
$ ('a ').die( 'クリック', 特別警告 );
.die() に関する質問
これらの関数を使用する場合、.die() メソッドには欠点があります。 .live() メソッドで使用される要素セレクターのみを使用できます。たとえば、
$('a').live( 'click ',specialAlert );
$('a').live( 'click', someOtherFunction )
// その後、最初のバインディングのみをアンバインドできます
$ ('a ').die( 'クリック', 特別警告 );
.die() に関する質問
これらの関数を使用する場合、.die() メソッドには欠点があります。 .live() メソッドで使用される要素セレクターのみを使用できます。たとえば、
Copy code コードは次のとおりです:
$(document).ready( function() {
$('a').live( 'click', function() {
alert(" あなたは現在このサイトを離れています");
return
})
// 特定の要素を選択できると良いでしょう。 // unbind しますが、これでは何も起こりません
$('a.no-alert').die();
.die() イベントはターゲットの選択が一致しているようです。 .live() バインディングはリリースされましたが、実際には $('a.no-alert') にはバインディングがないため、jquery はそれを削除するバインディングを見つけることができず、機能しません。
さらに悪いのは次の場合です:
$('a').live( 'click', function() {
alert(" あなたは現在このサイトを離れています");
return
})
// 特定の要素を選択できると良いでしょう。 // unbind しますが、これでは何も起こりません
$('a.no-alert').die();
.die() イベントはターゲットの選択が一致しているようです。 .live() バインディングはリリースされましたが、実際には $('a.no-alert') にはバインディングがないため、jquery はそれを削除するバインディングを見つけることができず、機能しません。
さらに悪いのは次の場合です:
コードをコピーします コードは次のとおりです: $( document).ready( function() {
$('a,form').live( 'click', function() { alert("別のページに移動します") ;
return true;
});
$('a').die(); ').die ();
// これのみが機能します
$('a,form').die();
.die() を修正する方法
return true;
});
$('a').die(); ').die ();
// これのみが機能します
$('a,form').die();
.die() を修正する方法
次回の記事では、下位互換性のあるムード動作を提供できる .die() を実行する新しい方法を提案します。おそらく時間があれば、jQuery コア開発チームに私の提案を受け入れて、次のリリースで変更を加えるように提案します。オプションのコンテキスト パラメーターを含め、カスタム ノードを接続できるように、今書いたメソッドをさらに追加したいと考えています。イベント、およびルート ノードではありません。 さらに詳しい情報と例が必要な場合は、jQuery .live() および
.die()のドキュメントを確認してください。
.delegate() と .undelegate() は .live() と .die() を置き換えることができ、密接に関連していることにも注意してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。