在事件触发器上使用document和element之间的区别
鉴于这两个jquery on事件触发器
$(document).on("click", "a[data-trigger='colorbox']",function(e){ $("a[data-trigger='colorbox']").on("click",function(e){ 在使用第一个颜色框时，我必须在触发颜色框之前两次单击锚标记。 对于后续点击，它不需要第二次点击来触发。 但对于第二个，首次点击时会触发颜色框。 这两者有什么区别吗？
我的function内容如下
e.preventDefault(); var currentTarget = $(e.currentTarget); currentTarget.colorbox({inline : true, href : currentTarget.data("href")});
$(document).on("click", "a[data-trigger='colorbox']",function(e){
这会将单击事件绑定到文档及其中的所有子元素。 然后，此单击事件检查单击的元素是否与filter匹配a[data-trigger='colorbox']
后来：
$("a[data-trigger='colorbox']").on("click",function(e){
将click事件直接绑定到a[data-trigger='colorbox'] 。
现在，如果你的元素是动态的，你会想要使用第一个元素。 这意味着您不必继续重新绑定点击事件。 如果你的元素是静态的，那么你想使用后者，因为它更有效。
第三种方式（或者更有效地执行第一种选择）是将其绑定到与document相对的静态父元素，然后对要单击的元素进行过滤，即
$(parent).on("click", "a[data-trigger='colorbox']",function(e){
这样更有效，因为它不需要捕获整个文档上的单击事件
第一种方法捕获从元素通过其父项向文档发出的事件。 此方法称为委派事件处理
第二个：直接在元素上捕获事件。
后台发生了什么：
文件结构 ：
- 文献
- 盛大的父母
- 亲
- 元件
- parent2
- 亲
- …
- 盛大的父母
事件 ：用户单击元素
结果：
- 元素的所有单击侦听器都被执行*（ 您的第二种情况 ）
- 事件开始冒泡
- 执行父级的所有单击侦听器*
- 执行Grand parent的所有单击侦听器*
- 所有文档的点击监听器都被执行*（ 你的第一个案例 ）
*侦听器获取事件对象，并可以通过调用取消冒泡：
-
event.stopPropagation()：不允许事件传播到父级，而是执行当前级别的所有侦听器。 -
event.stopImmediatePropagation()：不允许事件传播到父级，也不会在同一级别调用其他侦听器
JQuery可以处理绑定到文档的侦听器中元素的单击事件，因为在每个图层上都可以检查click事件对象以获取信息：
- 当前处理事件
event.currentTarget - 最初点击
event.target的元素
更多关于jQuery文档
回到你的情况
案例2
非常简单：
- 单击该元素
- 它的处理程序被执行
如果动态添加/删除元素等。您必须处理其处理程序（分配/取消分配等）
情况1
单击该元素：
- 事件一直持续到文档
- 调用文档上的处理程序
- 处理程序validation事件是否来自对元素进行的单击
如果您的元素是动态添加/删除的，并且您不想管理其上的点击处理程序，则应选择此解决方案。 不过你不应该在文档上分配它，因为每次点击页面都会调用基本的监听器，jQuery将检查target是否是你感兴趣的元素，如果是这样的话，调用你指定的处理程序。 总而言之，如果过度使用，这会降低性能。
了解这一切可以帮助您了解您的情况中的行为差异。