javascript - 如何在从隐藏的 div 动态复制的附加按钮上添加 eventListener？

Question

document.getElementById('btn1').addEventListener("click", function() {
 document.getElementById('div2').innerHTML = document.getElementById('hidden-div').innerHTML;
});
document.getElementById('btn2').addEventListener("click", function() {
 document.getElementById('div-main').innerHTML = "";
});

<div id="div-main">
	<input type="button" name="button1" value="button1" id="btn1">
</div>
<div id="div2">
	    
</div>
<div  style="display: none;">
    <div id="hidden-div">
	    <input type="button" name="button2" value="button2" id="btn2">
    </div>
</div>

我想在单击 button1 时添加一个 button2，当我单击 button1 时，button2 最初位于隐藏的 div 中，然后 button2 出现在 div2 中，但是当我单击 button2 时，它的事件不起作用。

Answer 1

getElementById('hidden-div').innerHTML返回 string ，而不是 DOM 元素。该字符串传递给 #div2并解析为新的 DOM 元素，这意味着最初绑定(bind)的事件不再绑定(bind)在 <input> 上.

事实上，innerHTML是不任何绑定(bind)事件复制 HTML 的常用方法。

要保留事件，您有两种选择:

• 绑定(bind)到#div2而不是按钮
• 或者不要破坏<input> .相反，使用 appendChild 附加它.

绑定(bind)到 #div2 :

document.getElementById('btn1').addEventListener("click", function() {
  document.getElementById('div2').innerHTML = document.getElementById('hidden-div').innerHTML;
});
document.getElementById('div2').addEventListener("click", function() {
  document.getElementById('div-main').innerHTML = "";
});

<div id="div-main">
  <input type="button" name="button1" value="button1" id="btn1">
</div>
<div id="div2">

</div>
<div style="display: none;">
  <div id="hidden-div">
    <input type="button" name="button2" value="button2" id="btn2">
  </div>
</div>

使用 appendChild :

document.getElementById('btn1').addEventListener("click", function() {
  let children = document.getElementById('hidden-div').children;
  for (let i = 0; i < children.length; i++) {
    document.getElementById('div2').appendChild(children[i]);
  }
});
document.getElementById('btn2').addEventListener("click", function() {
  document.getElementById('div-main').innerHTML = "";
});

<div id="div-main">
  <input type="button" name="button1" value="button1" id="btn1">
</div>
<div id="div2">

</div>
<div style="display: none;">
  <div id="hidden-div">
    <input type="button" name="button2" value="button2" id="btn2">
  </div>
</div>

重要说明:将绑定(bind)移动到 click 中函数意味着绑定(bind)将在每次 #btn1 时完成被点击。在您的情况下这不是问题，因为您正在销毁并重新创建 #div2 的内容同样，但是如果您将相同的逻辑用于另一个不会删除内容的构造，您将多次绑定(bind)相同的函数，这很危险，因为它可能会导致难以检测到错误。