javascript - Jquery 后期绑定(bind)使用 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

第一种形式在链接上 Hook 常规事件，而第二种形式在文档级别 Hook 委托(delegate)事件。

第一个与:

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

第一个表单需要在运行代码时显示链接。您稍后添加的链接将不会出现这些事件。

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

最好应该将委托(delegate)事件连接到尽可能靠近目标元素的位置。如果您连接时存在 #MAIN 元素，您将使用它而不是文档:

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