Warum addEventListener nicht zuhören?

Question

Warum kooperiert addEventListener nur mit dem CANCEL Label Element und nicht mit dem ersten, auch wenn ich den zweiten entferne? Ich bekomme keine Fehlermeldungen in der Konsole.

var ctrl = document.createElement('div'); 
 
ctrl.id = 'ctrl'; 
 

 
var showhide = document.createElement('label'); 
 
showhide.id = 'showhide'; 
 
showhide.innerHTML = 'Show/hide output'; 
 
showhide.setAttribute('onclick', 'return false;'); 
 
showhide.addEventListener("click", function() { 
 
    alert('Show/hide'); 
 
}); 
 

 
var cancel = document.createElement('label'); 
 
cancel.id = 'cancel'; 
 
cancel.innerHTML = 'CANCEL'; 
 
cancel.setAttribute('onclick', 'return false;'); 
 
//document.getElementById('showhide').insertAdjacentHTML('afterEnd', cancel.outerHTML); 
 
cancel.addEventListener("click", function() { 
 
    alert('cancel'); 
 
}); 
 

 
ctrl.appendChild(showhide) 
 
ctrl.innerHTML += ' | ' 
 
ctrl.appendChild(cancel) 
 
document.body.appendChild(ctrl)

Answer 1

Der Täter in Ihrem obigen Code ist die Linie mit ctrl.innerHTML += ' | '; Kommentar des Code aus, und es wird gut funktionieren. Der Grund ist, dass wenn Sie innerHTML verwenden, der Inhalt neu zugewiesen und neu ausgewertet wird, die vorhandenen Ereignisse zu zerstören. Here is an example explained in StackOverflow answers.