使用AJAX load()加载动态内容后，点击事件无法触发的问题

你遇到的问题是动态加载元素的事件绑定失效。页面初始化时，#divA并不存在于DOM中，你用$("#divA").click()绑定的事件只能作用于页面加载完成时已存在的元素，后续通过AJAX加载的#divA不会自动带上这个事件绑定。

改用jQuery的事件委托机制，通过on()方法把事件绑定到一个始终存在的父元素（比如#div1）上，监听动态元素的点击事件。修改后的index.php代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#div2").click(function(){
    $("#div1").load("load.php #divA");
  });
  // 事件委托：绑定到父元素#div1，监听内部#divA的点击事件
  $("#div1").on("click", "#divA", function(){
    $(this).load("load.php #divB");
  });
});
</script>
<div id='div1'>
    <div id='div2'>click</div>
</div>

事件委托依赖DOM的事件冒泡特性：当点击动态生成的#divA时，事件会向上冒泡到它的父元素#div1。#div1作为页面初始化时就存在的元素，会监听到这个冒泡事件，然后判断触发事件的目标是不是#divA，如果是就执行对应的回调逻辑。这样不管#divA什么时候被添加到页面中，只要它在#div1内部，点击事件就能被正确触发。

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