jquery - jQuery上方法之间的差异

Question

有什么区别：

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

和

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

Answer 1

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

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

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

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

……那么第二种方法永远不会触发。不过，这是一个极端情况，您可能不需要担心。