使用jQuery的.append()为div添加class后点击事件无响应求助

嘿，我太懂这个问题了！这是jQuery处理动态生成元素时的经典坑😉——你直接给.again类绑定点击事件，但这个元素是之后通过.append()动态添加到DOM里的，在你执行绑定代码的那一刻，它根本还不存在，所以事件自然没绑定上去。

核心原因 #

jQuery的.click()方法只会给执行代码时已经存在于DOM中的元素绑定事件。动态生成的元素是后来才出现的，自然没被包含在绑定范围内。

解决方案：使用事件委托（Event Delegation） #

事件委托的思路是把事件绑定到一个已经存在的父元素上（比如你的#src容器，甚至document），然后通过选择器筛选出真正要触发事件的子元素。这样不管子元素是一开始就有，还是后来动态添加的，只要匹配选择器，事件就能触发。

具体来说，把你原来的：

$('.again').click(function() {
  // 你的处理逻辑
});

改成：

$('#src').on('click', '.again', function() {
  // 这里写点击后要执行的代码，比如显示对应内容
  alert("点击生效啦！这里是How are You ? Fine !的对应内容");
  // 或者修改DOM，比如$(this).html("你点击了我！");
});

完整的示例代码 #

把你的代码补全后应该是这样的，你可以参考：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="src">
  <p class="feedback">Welcome !</p>
</div>
<script>
$('.feedback').click(function() {
  $('.feedback').html('Thank You ! Do not click here ;) click on How are you below');
  // 动态添加带.again类的元素
  $('#src').append('<p class="again">How are You ? Fine !</p>');
});

// 用事件委托给动态添加的.again元素绑定点击事件
$('#src').on('click', '.again', function() {
  // 这里写你预期的行为，比如显示对应内容
  $(this).html("你点击了How are You ? Fine !，对应的内容显示啦！");
});
</script>

为什么事件委托能生效？ #

这是利用了DOM的事件冒泡机制：当你点击.again元素时，事件会向上冒泡到它的父元素#src，父元素上绑定的事件监听器会检查触发事件的元素是否匹配.again选择器，如果匹配，就执行对应的处理函数。这样不管元素是何时添加的，只要在父元素范围内，就能被监听到。

内容的提问来源于stack exchange，提问作者zeuf