父级div添加show类后绑定的onclick事件不生效如何解决

问题原因 #

你使用document.querySelector查找元素的逻辑仅在页面首次加载时执行一次，只会给页面加载瞬间就匹配到.screen.show选择器的区块内的next按钮绑定点击事件。后续你手动给其他screen区块添加show类时，新区块内的按钮从未绑定过事件，自然无法响应点击。
你刷新页面后事件绑定逻辑会重新执行，匹配到新加show类的区块按钮，所以新的按钮可用、原按钮失效，本质就是事件仅绑定了单次，没有覆盖所有场景。

解决方案 #

改用事件委托的写法，把点击事件绑定到页面上不会动态销毁的上层容器（比如document，也可以替换为所有.screen区块的共同父容器，性能更好），每次触发点击时再判断触发条件是否符合：

document.addEventListener('click', function(e) {
  // 点击的是当前显示screen区块的下一页按钮
  if (e.target.closest('.screen.show .screen-table-buttons .next')) {
    // 这里写你原来的下一页切换逻辑
    // ...
  }
  // 点击的是当前显示screen区块的上一页按钮
  if (e.target.closest('.screen.show .screen-table-buttons .prev')) {
    // 这里写你原来的上一页切换逻辑
    // ...
  }
})

这种写法不需要你在切换show类时额外做事件绑定/解绑操作，只要对应screen区块有show类，点击按钮就会触发对应逻辑，完全匹配你的需求。

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