jquery delegate（）関数の理解に助けが必要

Question

私はjqueryの.delegate関数の構文を理解するのに苦労しています。のは、以下の私が持っているとしましょう：

$(".some_element_class").delegate("a", "click", function(){ 

    alert($(this).html()); 

}); 

私はa要素がclickイベントが適用される要素であることを知っています。そのa要素をクリックすると、イベントclickがトリガーされ、コールバック関数が呼び出されることがわかります。しかし、.delegateの前に来るものの目的は何ですか？この場合、.some_element_classの目的は何ですか？ .some_element_classを含む上記をどのように読んでいますか？また、上記の例では、$(this)は何を表していますか？それはa要素を表していますか、それとも.some_element_classを表していますか？

誰かに、これについて少し気を付けてください。

はそれが delegate()が .some_event_classに呼び出されることを意味します

Answer 1

ありがとうございます。 aはセレクタ文字列、clickはイベントタイプ文字列& function()はイベントハンドラ関数です。 delegate()メソッドは、 "ライブイベント"を処理するために使用され、静的イベントの場合はbind()が使用されます。私はこれが役立つことを願っています彼らは、特定の文書要素にイベントハンドラをバインドする方法です：あなたは

違い概要

//Static event handlers for static links $("a").bind("",linkHandler); //Live event handlers for dynamic parts of the document $(".dynamic").delegate("a", "mouseover", linkHandler); 

delegate() & bind()間のいずれかの疑問がある場合はお気軽に。

Answer 2

これにより、イベントバインディングが減少します。

これは、実際にはイベントをa tagsに直接バインドせずに、.some_element_classの要素内のイベントのみをa tagsに設定します。 jQueryの1.7、.delegate（のよう

http://api.jquery.com/delegate/

http://api.jquery.com/on/

）.on（）メソッドに置き換えられました。 しかし、以前のバージョンでは、 イベント委任を使用する最も効果的な手段が残りました。イベントバインディングとデリゲートの詳細については、 は.on（）メソッドにあります。 「.delegateの前に来るものの目的は何である...？」

$(elements).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(elements).on(events, selector, data, handler);  // jQuery 1.7+ 

$(".some_element_class").on("a", "click", function(){ 

    alert($(this).html()); 

}); 

Answer 3

：一般的に、これらの2つの方法の等価テンプレート です

• デリゲートは.some_element_class要素にバインドされています。

• それデリゲートはため.some_element_class

• その代理人がクリックされたものをテスト内で行われるすべてのクリックし、トリガーされるのであなたハンドラ関数ますのみラン...もし

  • クリックされた実際の要素は、"a"セレクタ、または
  • と一致します。 .some_element_classの子孫であるクリックされた実際の要素のncestorは、"a"セレクタに一致します。

---

<div class="some_element_class"> <!-- delegate handler is here --> 

    <div>won't trigger your handler</div> 
    <a>will trigger your handler</a> 
    <a><span>will trigger</span> your handler</a> 

</div> 

だから、一つだけハンドラがコンテナにバインドされていることがわかります。コンテナ内のすべてのクリックを分析し、クリックされた要素（またはそのネストされた祖先の1つ）がセレクタ引数と一致すると、関数が実行されます。何

---

一つだけ外側のハンドラがありますので、それはコンテナに追加将来の要素のために動作します...

上記の例でも

<div class="some_element_class"> <!-- delegate handler is here --> 

    <div>won't trigger your handler</div> 
    <a>will trigger your handler</a> 
    <a><span>will trigger</span> your handler</a> 

     <!-- this element newly added... --> 
    <a><span>...will also trigger</span> your handler</a> 

</div> 

---

」、 $(this)は？を表します。

this

"a"セレクタに一致要素を表します。

Answer 4

aは何が起こるでしょうが一致した要素があるかどうかを確認するために、通常のクリックイベントが.some_element_classにバインドされ、いつでもイベントが発生し、イベントターゲットが.some_element_classまで横断していることである、実際にはフィルタリングセレクタですフィルタリングセレクタ（タグ名a）。それが発生した場合、コールバックはthisが最初の要素に設定され、起動時のパスのaセレクタに一致します。 "オン" 推奨するため

$(".some_element_class").bind("click", function (e) { 
    var matches = $(e.target).closest("a", this); 
    if (matches.length) { 
     yourcallback.call(matches[0], e); 
    } 
});