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'));