使用 Barba.js 进行页面转换后，事件侦听器无法工作

Question

我正在使用 Barba.js 来处理我网站中的页面转换。我有一个导航菜单，当单击带有 nav-btn 类的 div 时会打开。第一次加载页面时一切正常，但使用 Barba.js 转换到另一个页面后，导航菜单按钮的 click 事件监听器 不再起作用，直到刷新页面。

这是我的代码的相关部分：

function navOpener() {
  let navbtn = document.querySelector(".nav-btn");

  if (navbtn != null) {
    console.log("Navopener running...");
    console.log(navbtn);
    navbtn.addEventListener("click", function () {
      console.log("nav opener clicked");
      // Other logic here...
    });
  }
}

当我检查控制台时，我在转换后看到消息 “Navopener running...” 和 navbtn 元素，所以我确信 navbtn 没问题，但是 click 事件侦听器不再触发，并且console.log（“点击导航开启器”）永远不会出现。我正在运行所有函数beforeEnter。正如我所说，当刷新页面时，一切都工作完美。

Answer 1

首先，我将 nav-btn 元素移到 Barba 容器之外，并应用了建议的事件委托方法，这解决了单击事件侦听器的问题，但转换后导航菜单仍然没有出现。但是，我注意到每次页面转换后，nav-btn 上的点击事件都会堆积起来。例如，在主页上的初始加载中，单击 nav-btn 会生成一个 console.log（“nav opener clicked”）。转换到另一个页面后，单击会产生两个console.log(“nav opener clicked”)，而移动到另一个页面后，单击会产生三个console.log(“nav opener clicked”)。因此，为此我更新了我的代码，如下所示

function openNavMenu() {
if (isNavOpenerInitialized) {
  return; // Don't add the event listener again
}

document.addEventListener("click", function (event) {
const navButton = event.target.closest(".nav-btn");

if (navButton) {
  console.log("nav opener clicked...");

  const bodyElement = document.querySelector("body");

  if (bodyElement.classList.contains("nav-open")) {
    bodyElement.classList.remove("nav-open");
    lenis.start();
  } else {
    bodyElement.classList.add("nav-open");
    lenis.stop();
   }
  }
 });

 isNavOpenerInitialized = true;
}

现在似乎可以工作了。

如果您有任何进一步的建议或改进，我将不胜感激。