jQuery 事件绑定与动态加载的元素答案

【问题标题】：jQuery event binding with dynamically loaded elementsjQuery 事件绑定与动态加载的元素
【发布时间】：2013-06-03 13:47:06
【问题描述】：

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

我有一个div，其中包含链接并且是分页的。链接是使用 AJAX 动态加载的。我想覆盖这些链接的绑定事件，所以我使用了.unbind() 并尝试了.on()。问题是这些动态加载的链接没有绑定。我猜那是因为选择器$('#id_of_links') 与前一组链接一起缓存。

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

【问题讨论】：

【解决方案1】：

对于动态添加的元素，您必须将函数绑定到它的父元素之一

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

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

【讨论】：

谢谢。有没有办法动态解除绑定事件？
有一个与.on()相反的.off()方法，你可以查看api.jquery.com/off我还没有尝试过，但我想它会像$ ('#PARENT').off('click', '#DYNAMICALLY_ADDED_CHILD', null);

【解决方案2】：

如果没有回调方法/函数或会循环的函数，您无法绑定所有元素，即使是那些尚未加载到页面中的元素，并不断检查元素是否具有特定属性或特性将绑定适当的函数，这可能会随着时间的推移导致内存泄漏。

【讨论】：

您可以将事件委托给父母（请参阅@yomy 答案）。那样的话，只有一个元素会有与之关联的事件，并且只有当它的特定子元素（在 on 方法中提到）会触发它时才会触发它。这与内存泄漏相反；）
@CyrilN.好的，谢谢你的出现。我需要阅读更多关于.on() 方法的功能！
你应该，这很有趣，对你以后会有很大的帮助:)