element.addEventListener 不添加监听器

【问题标题】：element.addEventListener not adding listenerelement.addEventListener 不添加监听器
【发布时间】：2018-07-20 11:51:51
【问题描述】：

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

//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 创建一个类似应用程序的网页，而不是浏览器。

【问题讨论】：

标签： html node.js events electron addeventlistener

【解决方案1】：

发生这种情况的原因是因为这行： suggestions.couldBe.innerHTML+="<br>";

由于innerHTML 上的+=，您的浏览器元素正在每个循环中生成全新的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'));

【讨论】：