将PHP加载器从jQuery切换到Fetch后JS滑块失效问题

问题核心是Fetch的异步特性导致的：你当前获取滑块DOM元素、绑定点击事件的代码，在Fetch请求完成并插入幻灯片HTML之前就已经执行了——这时候目标元素还没出现在DOM里，自然获取不到，后续的事件绑定也不会生效。

解决方法很简单：把所有操作滑块DOM的代码，移到Fetch的回调函数内部，确保幻灯片HTML插入到页面后再执行这些逻辑：

fetch('/_resources/php/dev-home-interrupter-loader.php')
  .then(function(response) {
    return response.text();
  })
  .then(function(body) {
    document.querySelector('#home-interrupter').innerHTML = body;
    
    // 所有滑块相关操作移到这里，确保DOM已加载完成
    const interrupterslidesContainer = document.getElementById("interrupter-slides-container");
    const interrupterslide = document.querySelector(".interrupter-slide");
    const previnterrupter = document.getElementById("interrupter-slide-arrow-prev");
    const nextinterrupter = document.getElementById("interrupter-slide-arrow-next");

    nextinterrupter.addEventListener("click", () => {
      const interrupterslideWidth = interrupterslide.clientWidth;
      interrupterslidesContainer.scrollLeft += interrupterslideWidth;
    });

    previnterrupter.addEventListener("click", () => {
      const interrupterslideWidth = interrupterslide.clientWidth;
      interrupterslidesContainer.scrollLeft -= interrupterslideWidth;
    });
  });

额外可以加个容错处理，避免接口返回异常时出现报错：

// 在获取元素后增加存在性判断
if (interrupterslidesContainer && interrupterslide && previnterrupter && nextinterrupter) {
    // 绑定点击事件的代码
}

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