Element innerHTML getting rid of event listeners

Question

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/

Never use `innerHTML` to insert contents. And your code is wrong, there is no way "it works fine" at the beginning. — Oriol, Jul 13 '16 at 21:23
Look at using `addEventListener` instead of setting `onclick`. — Heretic Monkey, Jul 13 '16 at 21:29
@MikeMcCaughan Same problem. Event listeners are removed when `innerHTML` is reparsed. — Oriol, Jul 13 '16 at 21:32

score 10 · Accepted Answer · answered Jul 13 '16 at 21:30

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>

Thanks a million! I never took into consideration, the fact that by modifying the innerHTML, it would overwrite the existing buttons too. — David Callanan, Jul 13 '16 at 21:39

Element innerHTML getting rid of event listeners

1 Answers1

Linked