Element innerHTML getting rid of event listeners [duplicate]

问题

I have a function for adding buttons to a page.

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++;
}

It basically creates a button into the html based off some data.

Every time I add a button, I would like it to be added to the start of div #mydiv, and since newbutton is also not an Element, but a String, I have to modify the innerHtml to add it to the start of #mydiv.

Afterwards, I must get the element (to add an onclick), by getting the first child of #mydiv.

However, after adding a second button to my page, the first button onclick no longer works.

If I modify my code to only add one button, everything works fine.

So now, only the top button (the latest added button), can be clicked.

How can I fix this?

I've also tried to use element.firstChild instead of element.children[0].

Thanks in advance everyone!

EDIT:

Here is a jsfiddle: ( as you can see the only button that works is stackoverflow )

https://jsfiddle.net/7c7gtL26/

回答1:

It seems you misunderstood the problem. The problem is that you are overwriting innerHTML in order to insert contents.

Never use innerHTML to insert contents. It will remove all the internal data, like event listeners. This is what happens here.

If you want to prepend some HTML string, use 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>

来源：https://stackoverflow.com/questions/38361875/element-innerhtml-getting-rid-of-event-listeners

标签

javascript

html

onclick

nodelist