javascript - 元素 innerHTML 摆脱事件监听器

这个问题在这里已经有了答案:

Is it possible to append to innerHTML without destroying descendants' event listeners? (13 个答案)

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

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/