動的に生成されたコンテンツにイベントレスポンスを追加するjQueryの詳細説明 jQuery live() method

動的に生成されたコンテンツにイベントレスポンスを追加するjQueryの詳細説明 jQuery live() method_jquery

WBOY

リリース： 2016-05-16 15:34:15

オリジナル

1307 人が閲覧しました

jQuery live() メソッドは、一致するすべての要素にイベント処理関数を付加します。要素が後から append、prepend、after などのイベントによって生成された場合でも、その要素は引き続き有効です。
このメソッドは、.bind() メソッドのバリアントとして見ることができます。 .bind() を使用する場合、セレクターによって一致した要素にはイベントハンドラーが付加されますが、後で追加された要素にはイベントハンドラーが付加されません。これには、.bind() を再度使用する必要があります。例:

<body> 
<div class="clickme">Click here</div> 
</body>

ログイン後にコピー

この要素に単純なクリックイベントをバインドできます:

コードをコピーしますコードは次のとおりです:

$(' .clickme').bind('click', function() {alert(www.jb51.net); }); 要素をクリックすると、警告ボックスがポップアップ表示されます。そして、この後にさらに別の要素が追加されたとします。

コードをコピーコードは次のとおりです。$('body').append('

別のターゲット

'); この新しい要素はセレクター ".clickme" にも一致しますが、この要素は .bind() の呼び出し後に追加されるため、この要素をクリックしても効果はありません。

ただし、 live() はこの状況に対するメソッドを提供します。次のようにクリックイベントをバインドすると:

コードをコピーします

コードは次のとおりです: $('.clickme '). live('click', function() {alert("www.jb51.net"); }); このようにして、新しく追加された要素をクリックしてもイベントハンドラーをトリガーできます。

イベントの代表者 live() メソッドは、イベント委任の使用により DOM にまだ追加されていない要素に対して機能します。祖先要素にバインドされたイベントハンドラーは、子孫でトリガーされたイベントに応答できます。 live() に渡されるイベントハンドラーは要素にバインドされませんが、特別なイベントハンドラーとして扱われ、DOM ツリーのルートノードにバインドされます。

この例では、新しい要素をクリックすると、次のステップが発生します:
1. クリックイベントを生成し、処理のために

に渡します。
2.

に直接バインドされたイベント処理関数がないため、イベントは DOM ツリーにバブルアップされます。 3. イベントは、DOM ツリーのルートノードまでバブルアップし続けます。この特別なイベント処理関数は、デフォルトでバインドされています。
4. .live() によってバインドされた特別なクリックイベント処理関数を実行します。 5. このイベント処理関数は、まずイベントオブジェクトのターゲットを検出し、継続する必要があるかどうかを判断します。
6. このテストは、$(event.target).closest('.clickme') が一致する要素を見つけることができるかどうかをテストすることによって実装されます。
7. 一致する要素が見つかった場合、元のイベントハンドラーが呼び出されます。
8. 上記のステップ 5 のテストはイベントが発生したときにのみ実行されるため、いつでも追加された要素がこのイベントに応答できます。
上記は、動的に生成されたコンテンツにイベント応答を追加する jQuery の jQuery live() メソッドの詳細な紹介です。皆さんの学習に役立つことを願っています。