Fetch HTML后JS仅触发一次，无法切换页面问题求助

你遇到的核心问题是事件绑定的元素被移除：当你通过body.innerHTML = ''清空并替换整个body内容时，原有的#submit按钮和#search输入框会被彻底删除，绑定在#submit上的click事件监听器也随之失效。第二次点击时，页面上的按钮已经是全新的DOM元素，没有绑定任何事件，自然无法触发切换逻辑。

下面提供两种直接有效的修复方式：

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

利用事件冒泡机制，把事件绑定在不会被替换的父元素（比如document）上，这样即使按钮被重新渲染，依然能触发事件。修改你的事件监听代码：

// 替换原有的按钮点击监听
document.addEventListener('click', function(e) {
  // 只处理id为submit的元素点击
  if (e.target.id !== 'submit') return;
  
  e.preventDefault();
  const searchInput = document.getElementById("search");
  const inputValue = searchInput.value.trim();
  
  if(inputValue === "result") {
    handleRequest("result.html");
  } else if(inputValue === "index") {
    handleRequest("index.html");
  }
  
  searchInput.value = "";
});

同时优化handleRequest函数，避免直接append整个body元素（可能导致DOM结构异常）：

function handleRequest(url) {
  fetch(url)
  .then(res => res.text())
  .then((text) => {
    const doc = new DOMParser().parseFromString(text, 'text/html');
    const targetBody = document.querySelector('body');
    // 直接替换body内容为新页面body的内容
    targetBody.innerHTML = doc.querySelector('body').innerHTML;
  });
}

方案2：将搜索栏放在不被替换的区域 #

如果页面结构允许，把搜索输入框和提交按钮放在独立于body内容的容器（比如固定顶部的header）里，替换内容时只更新页面主体部分，不影响搜索栏。

比如调整HTML结构：

<body>
  <header id="fixed-search-bar">
    <input type="text" id="search">
    <button id="submit">切换页面</button>
  </header>
  <main id="page-content">
    <!-- 这里是需要动态替换的内容 -->
  </main>
</body>

然后修改handleRequest函数，仅替换#page-content的内容：

function handleRequest(url) {
  fetch(url)
  .then(res => res.text())
  .then((text) => {
    const doc = new DOMParser().parseFromString(text, 'text/html');
    const targetContent = document.getElementById("page-content");
    // 获取新页面的主体内容并替换
    targetContent.innerHTML = doc.querySelector('main').innerHTML;
  });
}

这种方式下，原有的事件监听不需要修改，因为搜索栏元素从未被移除，事件绑定始终有效。

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