javascript - 如何在从隐藏 div 动态复制的附加按钮上添加事件监听器？

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 内function 表示每次都会进行绑定(bind) #btn1被点击。这对你来说不是问题，因为你正在销毁并重新创建 #div2 的内容同样，但是如果您对另一个构造使用相同的逻辑，而该构造不会删除内容，则您将多次绑定(bind)相同的函数，这很危险，因为它可能会导致难以检测到错误。