0

我在 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);

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

4

1 回答 1

1

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

于 2012-05-09T14:43:19.870 回答