1

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ますか?

誰か、これに光を当ててください。

ありがとうございました

4

4 に答える 4

1

delegate()で呼び出されることを意味し.some_event_classます。aセレクター文字列、イベントclickタイプ文字列、イベントfunction()ハンドラー関数です。delegate()メソッドは「ライブ イベント」の処理に使用され、静的イベントbind()には が使用されます。これが役立つことを願っています。ご不明な点がございましたらお気軽にお問い合わせください

bind()との違いdelegate()

//Static event handlers for static links
$("a").bind("",linkHandler);

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

概要:これらは、イベント ハンドラーを特定のドキュメント要素にバインドするメソッドにすぎません。

于 2012-02-25T13:55:29.953 に答える
1

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

これは基本的に、実際にイベントを直接バインドせずにa tags、クラスを持つ要素内でのみイベントを設定します。.some_element_classa tags

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

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

jQuery 1.7 の時点で、.delegate() は .on() メソッドに取って代わられました。ただし、以前のバージョンでは、イベント委任を使用する最も効果的な手段であり続けています。イベントバインディングと委譲の詳細については、.on() メソッドを参照してください。一般に、これらは 2 つの方法の同等のテンプレートです。

$(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());

});
于 2012-02-25T13:55:51.920 に答える
1

「....delegate の前にあるものの目的は何ですか?」

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

  • そのデリゲートは、内部で発生するクリックごとにトリガーされます.some_element_class

  • そのデリゲートはクリックされたものをテストするため、ハンドラー関数は次の場合にのみ実行されます...

    • クリックされた実際の要素が"a"セレクターと一致する、または
    • の子孫であるクリックされた実際の要素の祖先は、セレクターに.some_element_class一致します。"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 つだけであることがわかります。コンテナ内のすべてのクリックを分析し、クリックされた要素 (またはそのネストされた先祖の 1 つ) がセレクター引数と一致する場合、関数が実行されます。

囲んでいるハンドラーは 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"セレクターに一致した要素を表します。

于 2012-02-25T13:56:02.320 に答える
0

はa実際には単なるフィルタリング セレクタです。通常のクリック イベントが にバインドされ.some_element_class、イベントが発生するたびにイベント ターゲットがトラバースされ.some_element_class、フィルタリング セレクタ ( tagname a) に一致する要素があるかどうかが確認されます。その場合、コールバックはバブリング パスのセレクターにthis一致した最初の要素に設定されて起動されます。a

bind で同様のことができます:

$(".some_element_class").bind("click", function (e) {
    var matches = $(e.target).closest("a", this);
    if (matches.length) {
        yourcallback.call(matches[0], e);
    }
});
于 2012-02-25T13:57:23.977 に答える