如何用Ajax实现仿material.io的局部刷新且不破坏原有jQuery事件

1. material.io 加载效果的技术本质 #

这种“侧边栏不动、仅内容区随菜单点击/URL变化更新”的效果，和你提到的CSS-Tricks《动态页面内容替换》教程描述的技术完全同源，没有本质差异——核心是这套组合实现：

• 把全站通用的导航、侧边栏作为静态结构首次渲染，后续加载时不会被替换
• 点击菜单时通过Ajax拉取目标页面的完整HTML，仅提取需要动态更新的内容区DOM插入到页面
• 调用window.history.pushState修改地址栏URL，在不刷新整页的前提下模拟正常页面跳转的体验，同时兼容浏览器前进/后退按钮

你现在代码里已经用到了这套技术的核心组件，只是存在两个实现细节的问题。

2. Ajax加载内容后jQuery事件全部失效的根因 #

你现在遇到的“局部刷新后原有事件全部失效”的问题，原因非常明确：

你所有的jQuery事件绑定逻辑都只在页面第一次加载完成的jQuery(document).ready()回调里执行一次。当你通过Ajax替换掉#contentWrapper内部的DOM节点后，原来绑定在旧DOM上的事件会随旧节点一起被移除；新插入的DOM节点没有被执行过事件绑定逻辑，自然所有交互都会失效。

3. 零重构成本的修复方案 #

不需要把现有代码全部重写，也不需要把Ajax逻辑从ready回调里挪出去，只要用事件委托的方式调整事件绑定逻辑即可。

核心改法 #

找到你页面上永远不会被Ajax替换的静态父节点——根据你的HTML结构，外层的#containerWrapper从页面首次加载完成后就不会被修改，是最稳定的委托锚点。

把你原来所有直接绑定在动态内容区元素上的事件：

// 原写法：仅会绑定首次加载的DOM，DOM替换后事件全部丢失
$("#guts .your-btn").on("click", function() {
  // 原有业务逻辑
})

修改为委托到静态父节点的写法：

// 新写法：事件绑定在永远不会被替换的#containerWrapper上
$("#containerWrapper").on("click", "#guts .your-btn", function() {
  // 原有业务逻辑完全不需要改动
})

这种写法的原理是利用事件冒泡机制：事件触发后会向上冒泡到静态父节点，父节点实时判断触发事件的子元素是否匹配选择器，后续所有动态插入到父节点内部的新元素，都会自动匹配绑定的事件，不需要重复执行绑定逻辑。

同步修正你现有Ajax代码的细节问题 #

你目前的popstate回调（处理浏览器前进/后退的逻辑）存在逻辑不统一的问题，需要和首次菜单点击的加载逻辑保持一致：

// 原popstate代码（逻辑缺失）
$(window).bind('popstate', function() {
  $.ajax({url:location.pathname,success: function(data){
    $('#guts').html(data); // 直接把整页返回的HTML塞进去，没有提取目标内容节点
  }});
});

修正为：

$(window).bind('popstate', function() {
  $.ajax({
    url: location.pathname,
    success: function(data){
      // 和首次菜单点击的逻辑统一：从返回的整页HTML中提取#guts节点替换
      $('#contentWrapper').html($(data).find('#guts'));
      // 执行需要在新内容上运行的全局逻辑
      Prism.highlightAll();
      // 匹配material.io体验：内容更新后滚动到页面顶部
      window.scrollTo(0, 0);
    }
  });
});

方案效果 #

改完之后，所有原有jQuery事件在Ajax内容替换后都能正常生效，不需要额外引入第三方库，也不需要调整现有事件逻辑的业务代码，完全匹配你当前的HTML和代码结构。

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