ホームページ > 記事 > ウェブフロントエンド > 動的に生成されたコンテンツにイベントレスポンスを追加するjQueryの詳細説明 jQuery live() method_jquery
動的に生成されたコンテンツにイベントレスポンスを追加するjQueryの詳細説明 jQuery live() method_jquery
- WBOYオリジナル
- 2016-05-16 15:34:151279ブラウズ
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('f9801bc74da4136f1b3467d4e1756f02');
この新しい要素はセレクター ".clickme" にも一致しますが、この要素は .bind() の呼び出し後に追加されるため、この要素をクリックしても効果はありません。
ただし、 live() はこの状況に対するメソッドを提供します。次のようにクリック イベントをバインドすると:
コードをコピーします
コードは次のとおりです: $('.clickme '). live('click', function() {alert("www.jb51.net"); });
このようにして、新しく追加された要素をクリックしてもイベント ハンドラーをトリガーできます。
イベントの代表者
live() メソッドは、イベント委任の使用により DOM にまだ追加されていない要素に対して機能します。祖先要素にバインドされたイベント ハンドラーは、子孫でトリガーされたイベントに応答できます。 live() に渡されるイベント ハンドラーは要素にバインドされませんが、特別なイベント ハンドラーとして扱われ、DOM ツリーのルート ノードにバインドされます。
この例では、新しい要素をクリックすると、次のステップが発生します: 1. クリック イベントを生成し、処理のために dc6dce4a544fdca2df29d5ac0ea9906b に渡します。
2.
に直接バインドされたイベント処理関数がないため、イベントは DOM ツリーにバブルアップされます。
3. イベントは、DOM ツリーのルート ノードまでバブルアップし続けます。この特別なイベント処理関数は、デフォルトでバインドされています。
4. .live() によってバインドされた特別なクリック イベント処理関数を実行します。 5. このイベント処理関数は、まずイベント オブジェクトのターゲットを検出し、継続する必要があるかどうかを判断します。
6. このテストは、$(event.target).closest('.clickme') が一致する要素を見つけることができるかどうかをテストすることによって実装されます。
7. 一致する要素が見つかった場合、元のイベント ハンドラーが呼び出されます。
8. 上記のステップ 5 のテストはイベントが発生したときにのみ実行されるため、いつでも追加された要素がこのイベントに応答できます。
上記は、動的に生成されたコンテンツにイベント応答を追加する jQuery の jQuery live() メソッドの詳細な紹介です。皆さんの学習に役立つことを願っています。
4. .live() によってバインドされた特別なクリック イベント処理関数を実行します。 5. このイベント処理関数は、まずイベント オブジェクトのターゲットを検出し、継続する必要があるかどうかを判断します。
6. このテストは、$(event.target).closest('.clickme') が一致する要素を見つけることができるかどうかをテストすることによって実装されます。
7. 一致する要素が見つかった場合、元のイベント ハンドラーが呼び出されます。
8. 上記のステップ 5 のテストはイベントが発生したときにのみ実行されるため、いつでも追加された要素がこのイベントに応答できます。
上記は、動的に生成されたコンテンツにイベント応答を追加する jQuery の jQuery live() メソッドの詳細な紹介です。皆さんの学習に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。