在Javascript中為不同的按鈕編寫多個事件監聽器

Question

我正在嘗試運行兩個按鈕來顯示兩個彈出窗口。 我不明白為什么下面的CODE A不起作用但CODE B有效。 當我按下代碼A上的“press1”按鈕時，沒有任何反應。 我必須一次輸出所有HTML嗎？ 我正在嘗試運行for循環，所以我怎么能輸出兩個工作按鈕？

代碼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");
});

代碼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

當您通過innerHTML添加元素時，您正在使瀏覽器重繪所有內容，再次讀取代碼並解析它以重建DOM，這會創建一個沒有附加任何偵聽器的新button1（舊的被破壞）。

您應首先使用createElement創建新按鈕，然后將appendChild添加到buttondiv 。

因此，您可以在buttondiv及其事件中保留舊對象。 優點是您不會強制瀏覽器解析HTML而只處理內存中的對象，這樣會更快。

Answer 2

設置innerHTML的值會刪除所有元素的后代，並將其替換為通過解析字符串htmlString中給出的HTML而構造的節點。

innerHTML完全破壞並重新創建元素，從而忘記了所有盛行的事件。

要將HTML插入到文檔中而不是替換元素的內容，請使用方法insertAdjacentHTML() 。

演示：

 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被重新構建並贏得了'重新綁定。