javascript - For 循环在 1 处停止，不计算添加到 DOM 的元素

Question

我正在尝试使添加的每个子输入都具有与父输入相同的事件监听器。

片段(also on Codepen):

var main = document.getElementById("main").getElementsByTagName("a");

var button = document.createElement('input');

// Loop over A tags in #main
for (var i = 0; i < main.length; i++) {
  // # of A tags
  console.log(main.length);
  // Event listener per # of A tags
  main[i].addEventListener("click",function(e){
    // Clone parentElement #main
    var node = e.target.parentElement;
    var clone = node.cloneNode(true);
    // Append to DOM
    document.getElementById('main').appendChild(clone);
  });
}

<div id="main">
  <div class="input__container">
  <label>Input</label>
  <input placeholder="Placeholder..." class="input" id="" name="" type="text"/>
  <a class="btn">+</a>
  </div>
</div>

Answer 1

不要尝试复制事件处理程序，而是使用附加到#main的单个委托(delegate)事件处理程序:

var main = document.getElementById("main");

main.addEventListener("click", function(e) {
  // Delegated event handler returning early if wrong target
  if (!e.target.matches(".btn")) return;
  // Clone parentElement .input__container
  var node = e.target.parentElement;
  var clone = node.cloneNode(true);
  // Append to main
  this.appendChild(clone);
});

<div id="main">
  <div class="input__container">
    <label>Input</label>
    <input placeholder="Placeholder..." class="input" id="" name="" type="text" />
    <a class="btn">+</a>
  </div>
</div>