Jquery后期绑定使用on - 旧表单不起作用？

Question

我无法弄清楚为什么选项（1）不起作用。 我已阅读live和on，但遗漏/无法找到答案。

有人可以解释一下或指出我的文件吗？

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＆amp;脚本执行信息，但第一个搜索与选择器匹配的元素（在这种情况下是一个元素），并为其附加一个事件处理程序。

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