jQuery 解决动态创建的元素添加不了事件问题

关注

原创最新推荐文章于 2026-05-26 10:09:28 发布 527 阅读 AI 写同款· GEO 优化 ›

动态生成的DOM不会触发点击事件的原因及解决方法为了解决这个问题，我们可以使用事件委托的方式将点击事件绑定到父元素上，并在事件处理程序中检查事件目标是否匹配我们期望的子元素。然而，如果在事件绑定之后动态生成新的DOM元素，并且没有为这些新元素单独绑定事件处理程序，那么它们就无法触发点击事件。动态生成的DOM元素无法触发点击事件的主要原因是事件委托的机制。通过使用事件委托，我们可以确保动态生成的DOM元素也能够触发点击事件，而无需为每个元素单独绑定事件处理程序。要解决动态生成的DOM无法触发点击事件的问题，我们可以使用事件委托的方式来处理。阅读详情

如下面的例子，使用add方法创建的button标签是添加不了click事件的

<html>
<head>
</head>
<body>
<p class="pWrap">这是一个段落。
	<button class="btn">按钮</button>
</p>

<button onclick="add()">add</button>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

  $(".btn").on("click", function(){
    alert(1)
  });


function add() {
	$('.pWrap').append('<button class="btn">按钮</button>')
}
</script>
</html>

解决办法，给父级添加事件 on传第二个参数，也即该元素的选择器

<html>
<head>
</head>
<body>
<p class="pWrap">这是一个段落。
	<button class="btn">按钮</button>
</p>

<button onclick="add()">add</button>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

  $(".pWrap").on("click", '.btn',function(){
    alert(1)
  });


function add() {
	$('.pWrap').append('<button class="btn">按钮</button>')
}
</script>
</html>

收录于