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>";

+=发生的事情是您的浏览器元素在每个循环中生成全新的 HTML，因为innerHTML.

基本上在伪代码中：

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