Question

有什么区别：

$("a.myclass").on("click", callback);

和

$(document).on("click", "a.myclass", callback);?

Answer 1

当动态地将a.myclass添加到DOM时（例如，在加载文档时不存在），使用第二种方法。理想情况下，您希望在DOM中使用比document更接近的元素，以获得最佳性能^*。两者都绑定到a.myclass上的点击事件。

根据.on()关于第二种格式的jQuery docs：

事件处理程序仅绑定到当前选定的元素;他们在您的代码调用.on（）时页面上必须存在。要确保元素存在且可以选择，请执行事件绑定在文档就绪处理程序中的元素页面上的HTML标记。如果将新HTML注入页面，选择元素并在新HTML之后附加事件处理程序放入页面。

^{*在文档树顶部附近附加许多委托事件处理程序会降低性能。每次事件发生时，jQuery必须将该类型的所有附加事件的所有选择器与从事件目标到文档顶部的路径中的每个元素进行比较。为获得最佳性能，请将文档位置的委派事件尽可能靠近目标元素。避免过度使用文档或document.body来处理大型文档上的委托事件。}

Answer 2

$("a.myclass").on("click", callback);

使用此代码，jQuery会抓取与a.myclass匹配的所有元素，并将事件处理程序附加到它们。

$(document).on("click", "a.myclass", callback);

在这里，jQuery抓取document并附加事件处理程序以点击冒泡到它的事件（最初触发匹配a.myclass的元素）。

单击a.myclass时，第一个将在第二个之前执行，因为代码尚未“冒泡”到包含文档。

第二个优点是，正如j08691所说的那样，在上面的脚本执行（或者与该描述相匹配）之后添加到页面的符合该描述的元素仍然会触发回调。

缺点是，如果在某些时候你编写代码

$('a').on('click', function(e){
    e.stopPropagation();
})

或

$('a').on('click', function(e){
    return false;
})

...然后第二种方法永远不会开火。这是一个边缘案例，你可能不需要担心它。

jQuery方法之间的差异

2 个答案: