2

jQuery を使用して、クラス全体のクリック イベントに関数をアタッチしています。例えば：

$(".clickDiv").click(function(){
   $(this).hide();
});

クライアント側の JavaScript で、より多くの.clickDivインスタンスを動的に作成します。
を再度呼び出す必要があり$(".clickDiv).click(function...)ますか?それとも、新しいインスタンスでは、その関数がクリック イベントに自動的にバインドされますか?

4

3 に答える 3

7

はい、そうです。delegate event

このような：

$('#container').on('click', '.clickDiv',  function() {
   $(this).hide();
});

on ドキュメント:

セレクターが省略されているか null の場合、イベント ハンドラーは直接または直接バインドされていると見なされます。ハンドラーは、選択した要素でイベントが発生するたびに呼び出されます。イベントが要素で直接発生するか、子孫 (内部) 要素から発生するかは関係ありません。

セレクターが提供されている場合、イベント ハンドラーは委任されていると見なされます。イベントがバインドされた要素で直接発生した場合、ハンドラーは呼び出されませんが、セレクターに一致する子孫 (内部要素) に対してのみ呼び出されます。jQuery は、イベント ターゲットからハンドラーがアタッチされている要素 (つまり、最も内側の要素から最も外側の要素) までイベントをバブルし、セレクターに一致するそのパスに沿ったすべての要素に対してハンドラーを実行します。

イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが .on() を呼び出す時点でページに存在している必要があります。要素が存在し、選択できることを確認するには、ページの HTML マークアップにある要素のドキュメント対応ハンドラー内でイベント バインディングを実行します。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。または、次に説明するように、委任されたイベントを使用してイベント ハンドラーをアタッチします。

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされた時点で存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。この要素は、Model-View-Controller デザインのビューのコンテナー要素、またはイベント ハンドラーがドキュメント内のすべてのバブリング イベントを監視する場合のドキュメントなどです。document 要素は、他の HTML をロードする前にドキュメントの head で使用できるため、ドキュメントの準備が整うのを待たずに安全にイベントをアタッチできます。

ここであまりにも多くの人が を使用するように提案したという理由だけでlive、はバージョンによってlive非推奨になり、バージョンで に置き換えられました1.7on1.4.3delegate

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+
于 2012-04-09T03:02:23.233 に答える
1 
I am attaching an event like : 

$('body').on('click', 'button[data-tracking], a[data-tracking]',

                function(event) { console.log($(event.target));
});

and want to get to the target of element which is set up as :
  <pre> <[]a data-tracking="hello" href="hello">
    \<\span\>test now\<\/span\>
   \<\/a\>
 </pre>
it does work perfectly, but event.target gives me "span" element but what i want is "a" element so that I could get to value of data-tracking attribute.
于 2012-04-24T19:39:37.353 に答える
0

これにより、イベントがすべての新しいインスタンスにバインドされます

$('.clickDiv').live('click',  function() {
   $(this).hide();
});

http://api.jquery.com/live/

于 2012-04-09T03:09:16.930 に答える