1

I'm having a hard time understanding the syntax of the .delegate function of jquery. Let's say I have the following:

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

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

});

I know that the a element is the element to which the click event is applied. I know that once we click on that a element, the event click will be triggered and the callback function will be called. But what is the purpose of what comes before the .delegate? In this case, what is the purpose of .some_element_class? How do I read the above including the .some_element_class? Also, in the example above, what does $(this) represent? Does it represent the a element or does it represent .some_element_class?

Please somebody, shed some light on this.

Thank you

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_class而不实际a tags直接绑定一个事件。

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

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

从 jQuery 1.7 开始，.delegate() 已被 .on() 方法取代。然而，对于早期版本，它仍然是使用事件委托的最有效方法。有关事件绑定和委托的更多信息在 .on() 方法中。通常，这些是两种方法的等效模板：

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

所以你可以看到只有一个处理程序绑定到容器。它分析容器内的所有点击，如果点击的元素（或其嵌套的祖先之一）与选择器参数匹配，则您的函数将运行。

因为只有一个封闭的处理程序，它将适用于添加到容器中的未来元素......

<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是否有一个匹配过滤选择器（标记名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 回答