如何用JavaScript处理ModelAndView对象及事件监听失效问题

你用document.open()/write()/close()替换整个页面的操作，会彻底重置当前页面的JS执行上下文：新写入的<script>标签不会被浏览器自动解析执行，同时原页面绑定的所有事件监听器都会被销毁，新页面的自然没绑定事件，所以点击无响应。

方法一：只替换页面内容区域（推荐） #

没必要替换整个HTML，仅更新需要变化的部分（比如<section id="content">或<main>），保留原页面的JS上下文，外部脚本也无需重新加载。

修改你的renderModelAndView函数：

function renderModelAndView(htmlContent) {
  // 解析返回的HTML字符串
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = htmlContent;
  // 获取新页面的content区域
  const newContent = tempDiv.querySelector('#content');
  // 替换当前页面的content
  document.getElementById('content').replaceWith(newContent);
  
  // 若新内容需要绑定事件，这里调用脚本里的初始化函数即可
  // 比如 script.js 里的绑定逻辑封装成 init()，此处执行 init()
}

这种方式保留了侧边栏、导航栏的原有事件监听器，只更新主体内容，性能更优。

方法二：手动执行新页面的脚本（必须替换整个页面时用） #

如果一定要替换整个页面，需要手动提取并执行新HTML中的脚本：

修改renderModelAndView函数：

function renderModelAndView(htmlContent) {
  document.open();
  document.write(htmlContent);
  document.close();
  
  // 手动提取并执行页面脚本
  const scripts = document.querySelectorAll('script');
  scripts.forEach(oldScript => {
    const newScript = document.createElement('script');
    // 复制原脚本属性
    if(oldScript.src) {
      newScript.src = oldScript.src;
    } else {
      newScript.textContent = oldScript.textContent;
    }
    // 替换原脚本触发执行
    oldScript.replaceWith(newScript);
  });
}

该方式会重新加载执行所有脚本，模拟浏览器正常加载流程，但会重置所有页面状态，效率不如方法一。

方法三：用事件委托处理动态元素 #

不管哪种加载方式，事件委托都能避免动态元素的事件失效问题。将原本绑定到具体元素的事件，改为绑定到父元素（比如document）：

比如侧边栏切换按钮的绑定：

// 原写法（仅对初始页面元素有效）
// document.querySelector('.toggle-sidebar').addEventListener('click', function() { ... });

// 改为事件委托（对所有动态加载的元素有效）
document.addEventListener('click', function(e) {
  const toggleBtn = e.target.closest('.toggle-sidebar');
  if(toggleBtn) {
    // 执行侧边栏切换逻辑
    document.getElementById('sidebar').classList.toggle('hide');
  }
});

事件委托利用事件冒泡原理，不管元素是初始存在还是动态加载，只要匹配选择器就能触发事件。

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