在使用 jQuery 的 load() 方法加载另一个页面内容时，默认不会自动清除已绑定的事件，但可以通过手动方式彻底清除目标容器内的所有事件绑定，核心思路是：先清空目标容器并解绑所有事件，再执行 load() 加载新内容。

核心原理

  1. jQuery 的事件绑定（如 on()/click()）会将事件数据存储在元素的 jQuery._data 中，直接 html('') 仅移除 DOM 但可能残留事件缓存；
  2. off() 方法可解绑元素上的所有事件（无参数时），结合 empty() 清空 DOM + 清理事件缓存，能彻底清除绑定；
  3. 加载新内容后，新元素的事件需重新绑定（或用事件委托规避重复绑定问题）。

方案 1：加载前清空并解绑目标容器（推荐）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Load 页面并清除事件</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
  <button id="loadBtn">加载新页面</button>
  <div id="targetContainer">
    <!-- 初始内容（含绑定事件的元素） -->
    <button class="oldBtn">旧按钮（有事件）</button>
  </div>

  <script>
    // 1. 给旧元素绑定事件（测试用）
    $('.oldBtn').click(() => {
      alert('旧按钮事件触发');
    });

    // 2. 点击加载按钮的逻辑
    $('#loadBtn').click(() => {
      const $container = $('#targetContainer');
      
      // 关键：彻底清除容器内所有事件和DOM
      $container
        .off() // 解绑容器自身的所有事件
        .empty() // 清空子元素 + 清理事件缓存
        .find('*').off(); // 兜底：确保子元素事件全部解绑

      // 3. 加载新页面内容（示例：加载 new.html 的 #content 部分）
      $container.load('new.html #content', (response, status) => {
        if (status === 'success') {
          console.log('新内容加载完成，旧事件已清除');
          // 4. 给新内容绑定事件（按需）
          $container.find('.newBtn').click(() => {
            alert('新按钮事件触发');
          });
        }
      });
    });
  </script>
</body>
</html>

 方案 2：加载后直接替换并销毁旧容器（更彻底）

如果目标容器本身也绑定了事件，可直接替换容器 DOM，彻底销毁旧元素及事件：

$('#loadBtn').click(() => {
  // 1. 移除旧容器（自动销毁所有绑定的事件）
  $('#targetContainer').remove();
  
  // 2. 创建新容器并添加到页面
  const $newContainer = $('<div id="targetContainer"></div>');
  $('body').append($newContainer);
  
  // 3. 加载新内容到新容器
  $newContainer.load('new.html #content', () => {
    // 绑定新事件
    $newContainer.find('.newBtn').click(() => alert('新按钮事件'));
  });
});


关键注意点

  1. 事件委托的特殊处理：如果事件是通过事件委托绑定在父元素（如 $(document).on('click', '.oldBtn', ...)），仅清空子元素无效，需手动解绑委托事件：

    // 解绑指定委托事件
$(document).off('click', '.oldBtn');
// 或解绑所有委托（谨慎使用）
$(document).off('click');

  2. 避免内存泄漏：

    • empty() 会清理子元素的事件和数据（比 html('') 更彻底）；
    • remove() 会销毁元素本身及所有绑定的事件 / 数据。

  3. 加载远程页面的注意事项：

    • load() 加载远程页面时，仅会执行新内容中的 <script> 标签（但不会重复执行已有事件）；
    • 跨域页面无法通过 load() 加载，需后端配合。

  4. 总结

  5. 清除已有事件：优先用 $container.off().empty() 清空目标容器；

  6. 这样处理后，加载新页面时旧元素的所有事件都会被彻底清除，不会出现事件重复触发、内存泄漏等问题。

  7. 事件委托需单独解绑：$(委托父元素).off('事件类型', '选择器')；
  8. 最彻底的方式：$container.remove() 销毁旧容器，重建新容器后加载内容。