Element innerHTML loswerden Event-Listener

Question

Ich habe eine Funktion zum Hinzufügen von Schaltflächen zu einer Seite.

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

Es erstellt im Grunde eine Schaltfläche in das HTML basierend auf einigen Daten.

Jedes Mal, wenn ich einen Knopf hinzufügen, möchte ich es zu Beginn des div #mydiv, hinzugefügt werden, und da auch eine Schaltfläche Neu ist nicht Element, sondern ein String, muss ich die Innerhtml ändern Sie es an den Anfang hinzufügen von #mydiv.

Danach muss ich das Element (um einen onclick hinzuzufügen), indem Sie das erste Kind von #mydiv bekommen.

Nach dem Hinzufügen einer zweiten Schaltfläche zu meiner Seite funktioniert die erste Schaltfläche onclick jedoch nicht mehr.

Wenn ich meinen Code ändern, um nur eine Schaltfläche hinzuzufügen, funktioniert alles einwandfrei.

Jetzt kann nur die oberste Schaltfläche (die zuletzt hinzugefügte Schaltfläche) angeklickt werden.

Wie kann ich das beheben?

Ich habe auch versucht, element.firstChild statt element.children[0] zu verwenden.

Vielen Dank im Voraus jeder!

EDIT:

ist hier ein jsfiddle: (wie Sie den einzigen Knopf sehen, die stackoverflow funktioniert, ist)

https://jsfiddle.net/7c7gtL26/

Answer 1

Es scheint, dass Sie das Problem falsch verstanden. Das Problem ist, dass Sie innerHTML überschreiben, um Inhalte einzufügen.

Verwenden Sie niemals innerHTML, um den Inhalt einzufügen. Es entfernt alle internen Daten wie Event-Listener. Das passiert hier.

Wenn Sie einige HTML-String voranstellen möchten, verwenden Sie 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>