0

ページが読み込まれた後、ライブラリによって挿入されるページの要素がいくつかあります。これらの要素には、jQuery によって制御される onClick アクションがあります。これらのアイテムはページがロードされた後にレンダリングされるため、jQuery は onClick アクションを適用するためにこれらのアイテムを対象とする問題を抱えていますか?

4

2 に答える 2

5

これは、引数として渡された特定のセレクターを使用してハンドラーを親要素にバインドし、一致するセレクターがイベントをトリガーするものである場合にのみ、jQuery がハンドラーをトリガーするデリゲート イベントを使用する典型的なケースです。

直接および委任されたイベントの下にある jQuery ドキュメントの詳細を参照してください-> http://api.jquery.com/on/

.on( events [, selector] [, data], handler(eventObject) )

events- 「クリック」や「keydown.myPlugin」など、スペースで区切られた 1 つ以上のイベント タイプとオプションの名前空間。

selectorイベントをトリガーする選択された要素の子孫をフィルタリングするためのセレクター文字列。セレクターが null または省略されている場合、イベントは選択された要素に到達したときに常にトリガーされます。

dataイベントがトリガーされたときに event.data でハンドラーに渡されるデータ。

handler(eventObject)イベントがトリガーされたときに実行する関数。値 false は、単純に false を返す関数の省略形としても使用できます。

上記は、後で DOM に追加できる動的要素をターゲットにするためのものです。

ノート：

  1. 委任されたイベントの場合、ハンドラーをバインドするときに使用できる最も近い静的コンテナーに常にバインドする必要があります。詳細:すべての jquery イベントを $(document) にバインドする必要がありますか?

  2. ただし、要素が DOM に挿入された後にハンドラーをバインドすることによって実現できる、要素に直接バインドする方が常に優れています。

于 2012-11-13T19:43:51.763 に答える
3

次のフォームを使用します。

$("#myid").on("click",".myTargetElement", function(){
// do my click stuff here
});

マークアップの例:

<div id="myid">
   <div class="myTargetElement">Click Me</div>
   <div class="myTargetElement">Click Me</div>
</div>

注: このフォームは、親要素ではなくドキュメントにバインドされ、ドキュメントのトラバーサルが強制されるため、最適には推奨されません。

$(".myTargetElement").on("click", function(){
// do my click stuff here
});

例: 上記のマークアップの最初の要素を複製し、クリックすると青色になります:

$("#myid").on("click",".myTargetElement", function(){
    $(this).css('color','blue');
});

$('.myTargetElement').eq(0).clone().text("New").appendTo('#myid');
于 2012-11-13T19:44:04.207 に答える