元素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,但是a String,我必须修改innerHtml以将其添加到开头#mydiv.

之后,我必须通过获取第一个孩子来获取元素(添加onclick)#mydiv.

但是,在我的页面添加第二个按钮后,第一个按钮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>