html - element.addEventListener不添加监听器

Question

所以我有一个字符串数组，它将变成按钮，

//At start
function acceptSuggestion() {
    console.log(`clicked`)
    console.log(this.textContent);
}
//Else where
suggestions.couldBe.innerHTML = ``;
list.suggestions.forEach(function (item) {
    let button = document.createElement(`button`);
    button.textContent = item;
    button.addEventListener(`click`, acceptSuggestion);//before append
    button.style = `text-align:center; width:50%`;
    suggestions.couldBe.appendChild(button);
    button.addEventListener(`click`, acceptSuggestion);//after append
    suggestions.couldBe.innerHTML+=`<br>`;
});

它创建按钮很好

但是单击它们不会执行任何操作。

为什么是这样？我知道我对此有正确的事件权:https://www.w3schools.com/js/js_htmldom_eventlistener.asp

如果重要的话，我正在使用electron.js创建类似应用程序的网页，而不是浏览器。

Answer 1

发生这种情况的原因是由于以下这一行:suggestions.couldBe.innerHTML+="<br>";
发生的是，由于+=上的innerHTML，您的Browser元素正在每个循环生成所有新的新HTML。

基本上是伪代码:

var temp = suggestions.couldBe.innerHTML + "<br>;
suggestions.couldBe.innerHTML = temp;

这会使通过suggestions.couldBe.appendChild(button);添加的元素转换为html，然后重新解析，并在循环的每次迭代中使用HTML创建所有新元素。因为您的Button事件处理程序是在JS中创建的；从HTML版本重新创建按钮时，它会丢失。

您想全部通过JS来完成；不混合。所以我的建议是更改这一行:suggestions.couldBe.innerHTML+="<br>";
到
suggestions.couldBe.appendChild(document.createElement('br'));