使用jQuery绑定动态加载元素的事件

Question

我知道并研究多种绑定事件的方法，如`.on()`、`.live()`、`.click()`等。我知道在1.9+版本中`.live()`已经被弃用了。我遇到的问题是将动态DOM元素绑定到事件上。

我有一个包含链接且带有分页功能的`div`。链接是通过AJAX动态加载的。我想覆盖这些链接的绑定事件，所以我使用了`.unbind()`和尝试了`.on()`。问题是这些动态加载的链接没有被绑定。我猜测这是因为选择器`$('#id_of_links')`与之前的链接集合一起被缓存了。

问题： 是否可能在任何时候绑定加载在页面上的所有元素，而无需设置回调函数当用户点击链接的下一页时？

- Eric Kim

Answer 1

对于动态添加的元素，你必须将函数绑定到其中一个父元素。

$('#PARENT').on('click', '#DYNAMICALLY_ADDED_CHILD', function(){ CODE HERE });

父元素应该已经存在于DOM树中...

更多信息请查看：http://api.jquery.com/on/

- YomY

---

谢谢。有没有一种动态解除事件绑定的方法呢？ - Eric Kim

有一个与 .on() 相反的方法叫做 .off()，你可以查看 http://api.jquery.com/off/。我还没有尝试过，但我想它应该是这样的：$('#PARENT').off('click', '#DYNAMICALLY_ADDED_CHILD', null); - YomY

Answer 2

你不能绑定所有元素，即使它们还没有在页面中加载，而不使用回调方法/函数或循环函数来检查具有特定属性或特征的元素是否已经绑定了适当的函数，否则这可能会导致随着时间的推移出现内存泄漏。

- Jeff Noel

---

你可以将事件委托给父元素（参见 @yomy 的回答）。这样，只有一个元素与事件相关联，并且仅当它特定的子元素（在 on 方法中提到）触发它时才会被触发。这是内存泄漏的相反情况 ;) - Cyril N.

@CyrilN。好的，谢谢你展示它。我需要更多地了解 .on() 方法的特点！ - Jeff Noel

你应该学习，这非常有趣，将来会对你大有帮助 :) - Cyril N.