页面切换后jQuery失效，$(window).load()方案无效求助

这种问题我碰到过好多次了，大概率是页面切换用了**AJAX异步加载（比如单页应用、Turbo/Hotwire、pjax这类机制）**导致的——毕竟你重定向整页刷新就正常，切换其他页就失效，这个特征太明显了。

为什么你的$(window).load()没用？ #

不管是$(document).ready()还是$(window).load()，它们都只在整页首次加载完成时触发一次。如果页面切换是通过AJAX局部刷新内容，浏览器不会重新加载整个window/document，所以这些事件根本不会再次执行，你绑定的jQuery事件自然不会作用到新页面的元素上。

下面是几个靠谱的解决方案：

1. 用事件委托（最通用的方案） #

把事件绑定到一个始终存在的父元素（比如document，或者更接近目标元素的静态父容器），利用事件冒泡机制来监听动态添加元素的事件。这样不管元素是初始加载还是后来AJAX生成的，事件都能正常触发。

替换你原来的代码：

// 原来的代码（只对初始页元素生效）
// $(document).ready(function(e) { 
//   $("#goToNewPage").on('click', function() { ... });
// });

// 改成事件委托
$(document).on('click', '#goToNewPage', function(e) {
  // 这里写你的点击逻辑
  console.log('按钮被点击了');
});

原理：父元素document会监听所有冒泡上来的点击事件，当事件目标是#goToNewPage时，才执行你的逻辑，完美适配动态生成的元素。

2. 适配页面切换库的专属事件 #

如果你的项目用了Turbo、pjax或者类似的页面切换工具，它们会提供自己的事件来监听“页面切换完成”，比如：

• Turbo的turbo:load事件
• pjax的pjax:complete事件

你可以用这些事件来重新初始化jQuery功能，示例（以Turbo为例）：

$(document).on('turbo:load', function() {
  // 每次页面切换完成后，重新绑定事件
  $("#goToNewPage").off('click').on('click', function(e) {
    // 你的逻辑
  });
});

这里加off('click')是为了避免重复绑定事件——如果每次切换都绑定一次，点击按钮可能会触发多次逻辑。

3. 检查页面切换的实现逻辑 #

如果是自定义的AJAX页面切换，那你需要在AJAX请求完成、新内容插入DOM之后，手动调用你的初始化函数。比如：

// 假设这是你的页面切换AJAX逻辑
function switchPage(url) {
  $.ajax({
    url: url,
    success: function(html) {
      // 把新页面内容插入DOM
      $('#content-container').html(html);
      // 手动初始化jQuery功能
      initMyJqueryFunctions();
    }
  });
}

// 封装你的初始化逻辑
function initMyJqueryFunctions() {
  $("#goToNewPage").on('click', function(e) {
    // 你的逻辑
  });
}

// 初始页加载时也调用一次
$(document).ready(function() {
  initMyJqueryFunctions();
});

总结 #

优先用事件委托，它是最通用的解决方案，不需要依赖任何特定的页面切换库；如果是用了Turbo这类工具，就配合它们的专属事件来初始化。

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