为什么我的按钮单击侦听器在 chrome 扩展中不起作用？

Question

我正在尝试创建一个 chrome 扩展，我的问题是当我尝试为类中的每个按钮放置一个事件侦听器时，只有第一个按钮有一个，其余的没有事件侦听器。

function copyButtonInitialise(){
    var copyButtons = document.getElementsByClassName("copyPassword");
    console.log("length = ", copyButtons.length);
    for (var i = 0; i < copyButtons.length; i++){
        console.log(copyButtons[i] + " element number " + i + "= button");
        copyButtons[i].addEventListener("click", copyButtonClick);
    } 
}

如果单击任何具有“copyPasword”类的按钮，则应调用此函数。（只是想确保它被单击，但没有）

 function copyButtonClick(){
        console.log("Hello There");
    }

这是加载密码的函数，在给按钮添加事件监听之前调用。

async function loadPasswords(){
    document.getElementById("passwordTable").innerHTML = "";
    console.log("This is the loadpasswords function");
    chrome.storage.sync.get(null, function(items) {
        var allKeys = Object.keys(items);
        
        var passwordTable = document.getElementById("passwordTable");
        var header = passwordTable.createTHead();
        var passwordRow = header.insertRow(0);
        
        for(var i = 0; i < allKeys.length; i++){
            let passwordKey = allKeys[i];
            chrome.storage.sync.get([allKeys[i]], function(value){
                var passwordName = Object.keys(value);
                passwordName = passwordName[0];
                var table = document.getElementById("passwordTable");
                var header = table.createTHead();
                var passwordRow = header.insertRow(0);
                var cellTwo = passwordRow.insertCell(0);
                var cell = passwordRow.insertCell(1);
                cellTwo.innerHTML = "<p1 id=passwordNameCol>" + passwordName + "</p1>";
                cell.innerHTML = "<button class=copyPassword> Copy " + '"'+ passwordName + '"'+ "</button>";
                
            });
        }
    });
}

密码清楚地加载了。

当我点击按钮时，没有任何东西被发送到控制台，期待“你好”（如上所示）

Answer 1

试试这些：

1. 外部 chrome.storage.sync.get(null 返回所有存储的对键+值。 为什么在“for”语句中第二次使用 chrome.storage.sync.get？没有必要。
2. 不要使用表格的插入方法，而是尝试使用 createElement 和 appendChild。 首先创建一个 THEAD（或 TBODY）元素，然后将每一行放在上面。 完成后，您只需要附加 THEAD\TBODY 作为表的子项。
3. 尝试使用 createElement 创建按钮（我建议任何其他表格元素）并在创建后将事件侦听器放在其上（在“for”内）。
4. 如果您想为其他不同的行重用同一个表，请记住首先销毁 THEAD，否则刚刚创建的事件侦听器将保持孤立状态。 使用 element.remove() 之类的东西销毁 THEAD，而不是使用 innerHTML = ""。