Question

我试图运行两个按钮以显示两个弹出窗口。我不明白为什么以下代码A无效，而代码B有效。当我按CODE 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，而没有附加任何侦听器（旧的监听器被销毁了）。 / p>

您应该首先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

代码A 的问题是，按钮上有一个“ press1”和一个事件侦听器，但是一旦删除该元素并重新添加它，则实际上删除了绑定的OnClick事件，因为dom会重新构建，并且不会重新绑定。

使用Javascript

3 个答案: