javascript - 将事件监听器添加到新创建的按钮 (Vanilla JS)

Question

首先，我并不想使用 Jquery 来实现此目的，让我们解决这个问题。

酷，所以我对使用普通 JS 还比较陌生，并且我有一个可以单击按钮的页面，它会向列表中添加一个新的li。新的li包含一些东西，但最重要的是它包含它自己的ul，还有一些li，以及它自己的按钮能够向此子列表添加更多li。

它看起来像这样:

当您单击“添加问题”时，它会成功创建一个带有自己的答案集的新问题以及一个新的“添加答案”按钮。该按钮应该允许向列表添加更多答案，但我似乎无法将事件绑定(bind)到新按钮。我已确保它们都具有相同的类，因此 querySelectoryAll 不应该成为问题。页面加载上存在的“添加答案”按钮工作正常，但新按钮似乎看不到，但我的代码或其他内容没有被重新评估。代码如下:

// Get all 'add answer' buttons
var addAnswerElement = document.querySelectorAll(".addAnswer");

// Loop through the buttons
for (var i = 0; i < addAnswerElement.length; i++) {

    // TODO: make sure this works on additional add 'answer buttons', not just the first :(
    addAnswerElement[i].addEventListener('click', function() {

}

也许这需要包装在一个在某个时刻重新执行的函数中？我只是不熟悉如何做到这一点，也没有运气向谷歌描述什么或 S.O.搜索我正在尝试做的事情。

Answer 1

您的代码仅在页面加载时运行一次。此时只有一个 .addAnswer 元素，并且只有它才能添加事件监听器。您需要在每次创建新元素时运行附加事件监听器的代码。