元素 innerHTML 摆脱了事件侦听器 [重复]

Posted 2023-05-07

【中文标题】元素 innerHTML 摆脱了事件侦听器 [重复]

【英文标题】：Element innerHTML getting rid of event listeners [duplicate]

【发布时间】：2016-11-16 15:26:10

【问题描述】：

我有一个向页面添加按钮的功能。

var count = 0;

function createOnclickFunction(number)

    return function()
    
        alert("This is button number " + number);
    


function addButton(data)

    var newbutton = "..." //creates string from data

    var element = document.getElementById("mydiv");
    var children = element.children;

    element.innerhtml = newbutton + element.innerHTML;

    var currentCount = count;
    children[0].onclick = createOnclickFunction(currentCount)

    count++;

它基本上是根据一些数据在 html 中创建一个按钮。

每次我添加一个按钮时，我希望它被添加到 div #mydiv 的开头，并且由于 newbutton 也不是Element，而是一个String，所以我必须将 innerHtml 修改为将其添加到#mydiv 的开头。

之后，我必须通过获取 #mydiv 的第一个子元素来获取元素（以添加 onclick）。

但是，在向我的页面添加第二个按钮后，第一个按钮 onclick 不再起作用。

如果我修改我的代码只添加一个按钮，一切正常。

所以现在只能点击顶部按钮（最新添加的按钮）。

我该如何解决这个问题？

我也尝试过使用element.firstChild 而不是element.children[0]。

提前谢谢大家！

编辑：

这是一个 jsfiddle：（如您所见，唯一有效的按钮是 ***）

https://jsfiddle.net/7c7gtL26/

【问题讨论】：

切勿使用innerHTML 插入内容。而且你的代码是错误的，一开始不可能“它工作正常”。

你能为这个问题创造一个小提琴吗？

@Oriol 这会影响它吗？

@PrashantPalikhe 好的。

看看使用addEventListener而不是设置onclick。

【参考方案1】：

看来你误解了这个问题。问题是您要覆盖 innerHTML 以插入内容。

切勿使用innerHTML 插入内容。它将删除所有内部数据，例如事件侦听器。这就是这里发生的事情。

如果要添加一些 HTML 字符串，请使用 insertAdjacentHTML:

var count = 0;
function createOnclickFunction(number) 
  return function() 
    alert("This is button number " + number);
  

function addButton(data) 
  var newbutton = "<button>Click me</button>" //creates string from data
  var element = document.getElementById("mydiv");
  element.insertAdjacentHTML('afterbegin', newbutton);
  var children = element.children;
  children[0].onclick = createOnclickFunction(count)
  count++;

addButton();
addButton();
addButton();

<div id="mydiv"></div>

【讨论】：

谢谢一百万！我从来没有考虑过，通过修改innerHTML，它也会覆盖现有的按钮。