addEventListener 适用于静态按钮，但不适用于动态生成的按钮

Question

我在弹出窗口中有一个按钮.html，就像这样。

<button id='test'>TEST BUTTON</button>

然后我在单独的 js 文件中有这个函数和侦听器。

function getAjax()
{
    chrome.tabs.executeScript(null, {code:"alert('works!')"});
}
document.addEventListener('DOMContentLoaded', function () {
    var buttons = document.querySelectorAll('button');
    for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', getAjax);
  }
});`

当我使用上面的按钮时，该函数被调用。现在，如果我动态生成按钮，如下所示：

var AJAXholder = document.getElementById("AJAXholder"); 
var button = document.createElement("button");
button.setAttribute("class", "app-buttons");                
button.setAttribute("id", ""+ objects[i].name +"");
button.setAttribute("name", ""+ objects[i].name +"");
    var buttonText = document.createTextNode(""+ objects[i].name +"");
    button.appendChild(buttonText);
AJAXholder.appendChild(button);

这些按钮已正确创建，但无法触发相同的函数。我能做些什么来让它工作吗？

编辑：

当我创建一个新按钮时，我添加了一个新的事件侦听器，如下所示：

var newlistener = document.getElementById(""+ objects[i].name +"").addEventListener('click', getAjax);

它似乎有效。无论如何都不介意学习更好的方法，否则我会在允许时投票删除。

Answer 1

您的按钮生成代码是否包含在 DOMContentLoaded 侦听器函数中？如果没有，我的猜测是DOMContentLoaded在JS脚本运行以创建按钮之前触发，因此querySelectorAll('button')得到一个空列表，因为尚不存在按钮。 确保按钮创建脚本在 DOMContentLoaded 侦听器函数之后(或者更好的是，在侦听器函数中(按时间顺序运行。