元素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>