Question

如果我使用EventListeners附加一个新的输入字段，我会遇到innerHTML+=的问题，因为我猜有一个缓存问题。

<div id="frame">

  <input type="button"  id="btn"/>

</div>

JS

   document.getElementById("btn").addEventListener("click",function(){
       divframe.innerHTML+="  <input ... />..."
   });

我只是想要如果用户一遍又一遍地按下按钮，就会有一个新的输入和按钮。（现在不需要自己的EventListeners＆lt; - 。）

Answer 1

使用appendChild而不是使用innerHTML，所以第一个和后面的按钮不会丢失他的事件，而对于新元素你可以添加onclick事件：

<div id="frame">
  <input type="button" value="Add" class="addBtn">
</div>
<script>function appendBtn(){
    var newBtn = document.createElement("input");
  newBtn.onclick = appendBtn;
  newBtn.value = "Add";
  newBtn.classname = "addBtn";
  newBtn.type = "button"
    document.getElementById("frame").appendChild(newBtn);
}

document.getElementsByClassName("addBtn")[0].addEventListener("click",function(){
    appendBtn()
})</script>

Answer 2

你必须创建元素然后将元素附加到div中。你可以试试这个：

document.getElementById("btn").addEventListener("click", function() {  
  var div = document.getElementById("frame");   
  var input = document.createElement("INPUT");   
  div.appendChild(input); 
});

希望这会有所帮助！

Answer 3

divframe.innerHTML+=...重写内部HTML并从子元素中删除事件侦听器（如果有）。您需要再次addEventListener。下面是（无用但工作）代码。请注意，只有第一个按钮保持可点击状态，因为getElementById仅返回具有相同ID的一个（第一个）元素。正如在其他答案中所说，更好地使用appendChild。

var divFrame=document.getElementById('frame');
function setListener(){
document.getElementById('btn').addEventListener('click',
function(){
divFrame.innerHTML+=divFrame.innerHTML;
setListener();
});
}
setListener();

<div id="frame">
<input type="button" id="btn" value="click" />
</div>

JavaScript按钮单击应将输入字段附加到它自己的div

3 个答案: