JavaScript动态插入的closeBtn元素Event Listener绑定失效问题

问题根源 #

你在初始化nav对象的时候就提前获取了closeBtn的DOM引用，此时拿到的是页面初始渲染时的静态closeBtn元素。后续你通过innerHTML重写了#nav容器的全部内容，原本的closeBtn会被直接销毁，你存在this.closeBtn里的引用指向的是已经不存在的DOM元素，给它绑定事件自然不会生效。
而navBtn始终正常的原因很简单：它不在#nav容器内部，你重写#nav的内容不会对它产生任何影响，它的DOM引用一直是有效的。

解决方案 #

方案1：动态渲染后重新获取closeBtn引用 #

在你完成innerHTML赋值、调用navEventListnr之前，重新获取一次新插入的closeBtn元素即可，修改initnav方法：

initnav: function() {
  if (this.nav) {
    // 原有判断userType、赋值innerHTML的逻辑保持不变
    // ...
    // 新增代码：重新获取新插入的closeBtn元素
    this.closeBtn = document.getElementById('closeBtn')
    this.navEventListnr();
  }
}

补充优化：如果使用该方案，建议把navBtn的事件绑定逻辑从navEventListnr里抽出去，只在页面初始化时绑定一次，避免多次调用initnav导致navBtn重复绑定事件，触发多次执行逻辑。

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

直接把事件绑定到不会被销毁的父级#nav容器上，不需要每次渲染后重新绑定，性能和可维护性更好：

navEventListnr: function() {
  this.navBtn.addEventListener('click', () => {
    nav.animateNav("open");
  });
  // 把close事件委托给nav容器
  this.nav.addEventListener('click', (e) => {
    if(e.target.closest('#closeBtn')) {
      nav.animateNav("close");
    }
  });
}

这种方式不管你后续怎么更新#nav里的内容，只要closeBtn的id不变，事件都能正常触发。

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