Element innerHTML getting rid of event listeners [duplicate]

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/

Survivor

Never use innerHTML to insert contents. And your code is wrong, there is no way "it works fine" at the beginning. – Andean

Can you create a fiddle for the issue? – Tangier

@Andean Does this affect it though? – Survivor

@PrashantPalikhe Ok. – Survivor

Look at using addEventListener instead of setting onclick. – Kellogg

@MikeMcCaughan Same problem. Event listeners are removed when innerHTML is reparsed. – Andean

I never actually took that into consideration ! – Survivor

Answer 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>

Andean

Thanks a million! I never took into consideration, the fact that by modifying the innerHTML, it would overwrite the existing buttons too. – Survivor