Question

我在popup.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侦听器函数之后（或者更好地在其中）按时间顺序运行。

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

1 个答案: