每次 div 更改时添加事件处理程序

Question

我正在尝试将事件处理程序添加到包含经常更改的元素的特定 div。 有不同的选项卡，每个选项卡在单击时呈现来自 API 的不同数据问题是我需要向每个选项卡中的某些元素添加事件处理程序。 当我添加事件处理程序并且选项卡更改时，事件处理程序也会更改。

我如何能：

• 仅在页面加载后设置事件处理程序
• 每次标签重新加载时

Answer 1

您可以检查元素/元素更新，如果它们已更改，请在目标上使用removeEventListener 。

另一个效率不高但仍然有效的选项是使用addEventListener函数的第三个参数作为选项。 {once: true}将使您的事件侦听器仅发生一次，然后您检查元素/元素是否已更改，然后附加另一个侦听器或重用相同的侦听器。 更多关于MDN

Answer 2

我意识到在选择元素后我一直在清除它们，然后我试图更新它们，即使我已经清除了它们。

解决方案是重新选择它们

例如：当我的程序启动时，我 select 的元素是这样的：

const ele = document.querySelector(".class")

然后在代码中的某些地方，我像这样清除父元素：

document.querySelector(".parentElementClass").innerHTML = "";

清除后，我尝试像这样使用清除的元素：

ele.addEventListener...

这是错误的，这就是错误出现的地方。 我要做的是再次重新选择元素，然后像这样添加事件侦听器：

const ele = document.querySelector(".class")
ele.addEventListener("...