javascript - 使用on的Jquery后期绑定 - 旧形式不起作用？

Question

我不知道为什么选项（1）不起作用。我已经阅读了现场直播，但错过了/找不到答案。

有人可以解释一下或将我指向有关此的文档吗？

1. $('#MAIN a[href="#PAGE"]').on( 'click',function(event){ alert("1"); });
2. $(document).on('click', '#MAIN a[href="#PAGE"]', function(event){ alert("2"); });

谢谢。

Answer 1

第一种形式连接链接上的常规事件，而第二种形式连接文档级别的委托事件。

第一个与以下内容相同：

$('#MAIN a[href="#PAGE"]').click(function(event){ alert("1"); });

当您运行代码时，第一个表单需要存在链接。对于您稍后添加的链接，这些事件将不存在。

第二种形式会在事件冒泡到文档级别时捕获该事件，因此它也适用于您稍后添加的链接。

最好将委托事件连接到尽可能靠近目标元素的位置。如果连接#MAIN时元素存在，则可以使用它而不是文档：

$('#MAIN').on('click', 'a[href="#PAGE"]', function(event){ alert("2"); });

Answer 2

如果没有一些 HTML 和脚本执行信息，很难判断这是否是问题，但第一个搜索与选择器匹配的元素（好吧，在这种情况下为单个元素），并将事件处理程序附加到它。

第二种情况将事件处理程序附加到文档。每当点击事件发生时，它都会测试事件目标是否与选择器匹配，如果匹配则触发事件。这就是为什么您可以提前设置事件并动态创建元素的原因……但是这样做确实会影响性能。