jQuery的差异上

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

...那么第二种方法将永远不会触发。尽管这是一个边缘案例，你可能不需要担心它。