jQuery の .live() と .die() の使用の概要

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

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

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

コードは次のとおりです:

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

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

コードは次のとおりです:

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

ただし、javascriptを介してページへのリンクを追加します。

コードは次のとおりです:

$('body').append('

チェックしてください!

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

コードは次のとおりです:

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

ここで、ページに新しいリンクを追加すると、バインドも機能します。

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

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

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

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

コードは次のとおりです:

$('a').die() ;

より具体的に言うと、ホバーなどの他のイベントがバインドされており、保持する必要がある場合は、クリック イベントのバインドを解除することしかできません。

コードは次のとおりです:

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

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

コードは次のとおりです:

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

コードは次のとおりです。

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

コードは次のとおりです:

$(document).ready( function() { 
$('a,form').live( 'click', function() { 
alert("You are going to a different page"); 
return true; 
}); 
}); 
// NEITHER of these will work 
$('a').die(); 
$('form').die(); 
// ONLY this will work 
$('a,form').die();

.die() を修正する方法

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

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

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

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