jQuery单击附加元素答案

【问题标题】：jQuery click on appended elementsjQuery单击附加元素
【发布时间】：2011-05-25 11:15:47
【问题描述】：

我用 jQuery 生成了一些 html 链接并将其附加到一些 div 但是当这些元素被附加时，我现在不能调用 click 方法（当它们被硬编码到 html 时它工作正常） $('#something a').click(function() ...

有人知道解决办法吗？

【问题讨论】：

标签： jquery click append

【解决方案1】：

在这些情况下使用.delegate()：

$('#something').delegate('a', 'click', function() {

这会在#something 上附加一个click 处理程序，而不是指向其中的<a> 元素...因此它适用于稍后附加的锚点。替代版本（由于某些原因更糟）是.live()，如下所示：

$('#something a').live('click', function() {

【讨论】：

@Nick - 为什么使用 live 更糟？只是好奇，因为我经常使用它。
@Nick - 您能否评论一下 .live() 更糟的原因 - 我真的很感兴趣。干杯！
@Josh, @Jakub - 使用.live()，让我们使用上面的代码 - $('#something a') 选择器立即运行，但我们不在乎它找到了什么......结果被浪费了.此外，由于它附加到 document，因此必须针对该选择器检查 every click。使用.delegate() 只有非常快的$('#something') 选择器运行，我们使用结果。也只需要检查来自#something 内的点击，因为它们是在该父级进行检查的，所以.delegate() 解决了两个性能原因......使用更昂贵的选择器，收益会更大。
呃尼克我讨厌你（不是真的），我实现了一个类似委托的东西（除了这个总是指向元素触发）只是在几周后才意识到 jquery 完成了它。哦，这就是我没有阅读整个 api 的结果。
+1 这个答案对我有帮助。顺便说一句，一年后，作为 jQuery 1.7+，.on() 取代了 .delegate()

【解决方案2】：

添加元素时也可以添加 [click] 事件，如下所示：

$('<someElement>').click(function(){ 
    $('<someElement>').append('<htmlCodeToAppend>');
    $('<appendedElement>').click(function() { /* do something */ });
});

这种方法可以完成这项工作，但我不确定是否有任何警告——也许其中一位专业人士可以介入。

干杯，埃里克

【讨论】：

【解决方案3】：

您需要使用 live 函数来确保 click 事件被绑定到页面加载后已添加到 DOM 的元素：

$('#something a').live('click',function() .....

【讨论】：