Writing multiple event listeners for different buttons in Javascript

Question

I'm trying to run two buttons to show two pop-ups. I don't understand why CODE A below doesn't work but CODE B works. When I press the "press1" button on CODE A, nothing happens. Must I output all my HTML together at once? I'm trying to run a for-loop so how could I output both working buttons?

CODE A

document.getElementById("buttondiv").innerHTML += '<tr><td><button class="press1">Press Me</button></td></tr>';

//Find all buttons on the page with the name transferToken
var button1 = document.querySelector('button.press1');

button1.addEventListener('click', function () {
  alert("Hello John");
});

document.getElementById("buttondiv").innerHTML += '<tr><td><button class="press2">Press Me</button></td></tr>';

var button2 = document.querySelector('button.press2');

button2.addEventListener('click', function () {        
  alert("Hello Jane");
});

CODE B

document.getElementById("buttondiv").innerHTML += '<tr><td><button class="press1">Press Me</button></td></tr>';

document.getElementById("buttondiv").innerHTML += '<tr><td><button class="press2">Press Me</button></td></tr>';

var button1 = document.querySelector('button.press1');

button1.addEventListener('click', function () {
  alert("Hello John");              
});

var button2 = document.querySelector('button.press2');

button2.addEventListener('click', function () {
  alert("Hello Jane");
});

Answer 1

When you add an element via innerHTML you are making the browser redraw all the content, read the code again and parse it to rebuild the DOM, which creates a new button1 without any listener attached (the old one got destroyed).

You should first createElement to make your new button and then appendChild to your buttondiv .

So you preserve old objects inside your buttondiv and their events. The advantage is that you don't force the browser to parse HTML and only deal with objects in memory instead, which is way faster.

Answer 2

Setting the value of innerHTML removes all of the element's descendants and replaces them with nodes constructed by parsing the HTML given in the string htmlString .

innerHTML completely destroy and recreate element, thus forget all the prevously attached event.

To insert the HTML into the document rather than replace the contents of an element, use the method insertAdjacentHTML() .

Demo:

 document.getElementById("buttondiv").insertAdjacentHTML('beforeend', '<tr><td><button class="press1">Press Me</button></td></tr>'); //Find all buttons on the page with the name transferToken var button1 = document.querySelector('button.press1'); button1.addEventListener('click', function () { alert("Hello John"); }); document.getElementById("buttondiv").insertAdjacentHTML('beforeend','<tr><td><button class="press2">Press Me</button></td></tr>'); var button2 = document.querySelector('button.press2'); button2.addEventListener('click', function () { alert("Hello Jane"); }); 

 <div id="buttondiv"></div> 

Answer 3

CODE A的问题是，你有按钮“press1”并且它上面有一个事件监听器，但是一旦你拿走了那个元素并重新附加它，你基本上删除了绑定的OnClick事件，因为dom被重新构建并赢得了'重新绑定。