使用Barba.js页面切换后，导航按钮点击事件监听器失效

问题原因 #

你在Barba的beforeEnter阶段执行事件绑定，此时新页面的DOM元素还未插入到页面文档流中——虽然能获取到元素对象，但绑定的事件无法生效；同时直接给动态生成的元素绑定事件，在DOM被Barba替换后，容易出现事件丢失的情况。

解决方案 #

方案1：调整事件绑定的生命周期阶段

将navOpener函数移到Barba的enter或afterEnter阶段执行，这两个阶段新页面的DOM已经挂载到文档流中，此时绑定的事件能正常触发：

barba.init({
  transitions: [{
    enter(data) {
      navOpener();
    }
  }]
});

原navOpener函数可保持不变，但如果该函数会被多次执行，建议先移除旧监听再添加新的，避免重复绑定导致逻辑多次触发。

方案2：使用事件委托（更推荐）

把点击事件绑定到始终存在的父元素（比如document），通过事件冒泡监听.nav-btn的点击，无需关心元素何时被添加到DOM：

function navOpener() {
  // 先移除重复监听，防止多次绑定导致逻辑重复执行
  document.removeEventListener("click", handleNavClick);
  document.addEventListener("click", handleNavClick);
}

function handleNavClick(e) {
  // 检查点击目标是否为.nav-btn或其子元素
  if (e.target.closest(".nav-btn")) {
    console.log("nav opener clicked");
    // 你的导航菜单逻辑代码...
  }
}

这种方式不受Barba页面切换的影响，只要.nav-btn存在就能触发事件。

额外排查点 #

如果以上方案无效，可以检查是否有其他代码调用了e.stopPropagation()阻止了事件冒泡，导致点击事件无法传递到监听的父元素。

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