需要帮助理解jquery delegate()函数

Question

我很难理解jquery的.delete函数的语法。假设我有以下内容：

$(".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？

请有人来解释一下。

感谢

Answer 1

这减少了事件绑定。

这基本上只在类为.some_element_class的元素中设置a tags上的事件，而不实际将事件直接绑定到a tags。

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

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

从jQuery 1.7开始，.delete（）已被.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());
});

Answer 2

"….委托前的内容的目的是什么？"

• 委托绑定到.some_element_class元素。

• .some_element_class 内每次点击都会触发该委托

• 该委托测试被点击的内容，因此您的处理程序函数将仅运行如果…

  • 单击的实际元素与"a"选择器匹配，或者
  • 作为CCD_ 17的后代的被点击的实际元素的任何祖先与CCD_

---

<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)代表什么？"

CCD_ 20将表示与CCD_ 21选择器匹配的元素。

Answer 3

这意味着delegate()在.some_event_class上被调用。a是选择器字符串、click是事件类型字符串&function()是事件处理程序函数。delegate()方法用于处理"实时事件"，而对于静态事件则使用bind()。我希望这能有所帮助。如果您对有任何疑问，请随时询问

CCD_ 29&delegate()

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

摘要：它们只是将事件处理程序绑定到特定文档元素的方法。

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);
    }
});