将事件监听器添加到新创建的按钮（Vanilla JS）

Question

首先，我不是试图使用Jquery，让我们把它弄清楚。

很酷，所以我对使用vanilla JS相对较新，而且我有一个页面可以点击按钮，它会在列表中添加一个新的 li 。新的 li 包含一些内容，但最重要的是它包含它自己的 ul ，还有一些 li ，以及它自己的按钮能够在此子列表中添加更多 li 。

这是它的样子：

当您点击“添加问题”时，它会成功创建一个包含自己的答案集的新问题，以及一个新的“添加答案”按钮。该按钮应该允许向列表添加更多答案，但我似乎无法将事件绑定到新按钮。我已经确定他们都有相同的类，所以查询选择所有应该不是问题。页面加载中存在的“添加答案”按钮工作正常，但似乎没有看到新的按钮，但我的代码，或者没有被重新评估。这是代码：

// 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元素，只有它才能添加事件监听器。每次创建新元素时，都需要运行附加事件侦听器的代码。