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

原创于 2019-02-27 23:15:09 发布 · 492 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #js

js 同时被 2 个专栏收录

25 篇文章

订阅专栏

jQuery

2 篇文章

订阅专栏

本文介绍了一种在使用jQuery时，对于动态添加的DOM元素如何正确绑定click事件的方法。通过给父级元素添加委托事件，可以确保即使是在页面加载后动态创建的子元素也能响应事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如下面的例子，使用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>