jquery中对动态生成的标签不会响应click事件

Question

动态生了一个a标签，但无法对该标签添加点击事件:

$('#apple a').bind('click', function() {
  alert("Bound handler called.");
});

$('#apple a').on('click', function() {
  alert("Bound handler called.");
});

Answer 1

让【道友老李】来帮你解答，本回答参考通义千问大模型编写，并整理提供，如果还有疑问可以点击头像关注私信或评论。

如果答案让您满意，请采纳、关注，非常感谢！

### 问题分析

你提到的问题是关于如何为动态生成的<a>标签添加点击事件。在你的示例中，使用了两种方法来尝试绑定点击事件：.bind() 和 .on() 方法。然而，如果这些标签是在DOM加载之后通过JavaScript或jQuery动态创建的，那么直接使用这两种方法可能不会生效，因为它们只能作用于已存在的元素。

解决方案

对于动态添加到DOM中的元素，推荐使用事件委托（Event Delegation）的方式。这意味着将事件处理器附加到一个静态父元素上，而不是直接附加到目标元素上。这样，即使子元素是后来动态添加的，也可以捕捉到事件。

使用 jQuery 的 .on() 方法实现事件委托

你可以利用 .on() 方法的第二个参数指定选择器，从而实现事件委托。具体来说，这个参数允许你在父元素上监听事件，并且只对匹配该选择器的后代元素执行处理函数。

示例代码

<div id="apple">
  <!-- 假设这里会动态插入 <a> 标签 -->
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  // 动态添加 <a> 标签
  setTimeout(function() {
    $('#apple').append('<a href="#">Click me!</a>');
  }, 1000);  // 1秒后添加链接
  
  // 使用事件委托绑定点击事件
  $('#apple').on('click', 'a', function(event) {
    event.preventDefault();  // 阻止默认行为
    alert("Bound handler called.");
  });
</script>

在这段代码中： - 我们首先等待1秒钟后向 #apple 元素内动态地添加了一个 <a> 标签。 - 然后，我们使用 .on('click', 'a', ...) 来设置事件监听器。这里的 'a' 是选择器，表示只有当点击的是 #apple 内部的 <a> 标签时才会触发回调函数。

这种方法不仅适用于当前已经存在的元素，也适用于未来可能会被添加到 #apple 中的新 <a> 标签。

注意事项

• 确保所使用的jQuery版本支持 .on() 方法。如果你还在使用旧版jQuery（如1.x），则需要使用 .delegate() 或 .live() 方法（不过这两个方法在较新版本中已被废弃）。
• 如果动态内容是通过Ajax请求加载的，请确保事件绑定发生在内容成功加载之后。
• 为了提高性能，尽量将事件委托应用在最近的静态祖先元素上，避免不必要的冒泡过程。