元素innerHTML摆脱事件监听器

Question

我有一个功能，用于向页面添加按钮。

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：（正如你所看到的作品是stackoverflow唯一的按钮）

https://jsfiddle.net/7c7gtL26/

Answer 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>