使用jQuery load方法后.item点击事件失效，请求技术支援

嘿，这个问题我之前开发时也踩过坑！问题出在你用load()方法刷新#demo区域的逻辑上：

你一开始给.item绑定的点击事件，是直接绑定在页面初始加载时就存在的.item元素上的。但当你点击Refresh按钮后，$("#demo").load(...)会把#demo里的内容完全替换成新加载的DOM元素——这些新的.item并没有被绑定点击事件，所以自然就失效了。

给你两个靠谱的解决办法：

方法1：使用事件委托（推荐） #

事件委托是把事件绑定在一个不会被替换的父元素上（比如document或者#demo本身），利用事件冒泡机制来触发回调。不管是初始的还是后来动态加载的.item，都能被监听到。

修改后的代码如下：

<button id="button" type="submit">Refresh</button>
<div id="demo">
  <div class="item"> item 1 </div>
  <div class="item"> item 2 </div>
  <div class="item"> item 3 </div>
</div>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function() {
  $("#button").click(function() {
    $("#demo").load(location.href + " #demo");
    return false;
  });

  // 用事件委托绑定点击事件
  $(document).on('click', '.item', function() {
    $(this).css("background", "red");
  });
});
</script>

方法2：在load回调中重新绑定事件 #

如果你不想用事件委托，也可以在load()方法完成后，重新给新加载的.item绑定点击事件：

<button id="button" type="submit">Refresh</button>
<div id="demo">
  <div class="item"> item 1 </div>
  <div class="item"> item 2 </div>
  <div class="item"> item 3 </div>
</div>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function() {
  // 把绑定逻辑抽成函数，方便复用
  function bindItemClick() {
    $(".item").click(function() {
      $(this).css("background", "red");
    });
  }

  // 初始加载时绑定
  bindItemClick();

  $("#button").click(function() {
    $("#demo").load(location.href + " #demo", function() {
      // load完成后，重新绑定事件
      bindItemClick();
    });
    return false;
  });
});
</script>

两种方法里更推荐第一种事件委托，因为它不需要每次加载都重新绑定，代码更简洁高效，也能避免重复绑定的潜在问题。

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