Поскольку цикл останавливается на 1, не считая элементов, добавленных в DOM

Question

Я пытаюсь сделать так, чтобы у каждого добавленного дочернего ввода был тот же прослушиватель событий, что и у родительского ввода.

Фрагмент ( также на 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

Я бы не сказал, что это лучший способ для достижения этой цели, но стараюсь придерживаться вашей общей стратегии здесь:

let cloneSelf = function(e) {
  var parent = e.target.parentElement;
  var clone = parent.cloneNode(true);
  // Event listeners are not cloned with "cloneNode" so we have to do it manually.
  clone.getElementsByTagName("a")[0].addEventListener("click", cloneSelf);
  document.getElementById('main').appendChild(clone);
}

// Get the first link, and add the event listener
var firstLink = document.getElementById("main").getElementsByTagName("a")[0];

firstLink.addEventListener("click", cloneSelf);

<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 2

Метод cloneNode не копирует прослушиватели событий.

Клонирование узла копирует все его атрибуты и их значения, включая встроенные (встроенные) прослушиватели.Он не копирует прослушиватели событий, добавленные с использованием addEventListener () или тех, кто назначен свойствам элемента (например, node.onclick = fn).

описание cloneNode

Answer 3

Вы не добавляете никаких элементов a в DOM в вашем цикле for, поэтому он останавливается, когда завершает работу с теми элементами в #main, которые присутствуют при его запуске (есть только один).

Возможно, вы вместо этого хотите использовать делегирование событий на main: вы обрабатываете нажатие на main, но затем что-то делаете с ним только в том случае, если щелчок прошел через a.btn;см. комментарии:

// Get the element, not the `a` elements within it
var main = document.getElementById("main")

// Listen for clicks on it
main.addEventListener("click", function(e) {
  // If this click passed through an `a.btn` within #main (this``)...
  var btn = e.target.closest("a.btn");
  if (btn && this.contains(btn)) {
    // Clone the btn's parentElement, append to #main
    var node = btn.parentElement;
    var clone = node.cloneNode(true);
    main.appendChild(clone);
  }
});

<div id="main">
  <div class="input__container">
    <label>Input</label>
    <!-- Note that `id` and `name` are not allowed to be blank; just leave them off -->
    <input placeholder="Placeholder..." class="input" type="text"/>
    <a class="btn">+</a>
  </div>
</div>

Answer 4

Вместо того, чтобы пытаться дублировать обработчик событий, используйте один делегированный обработчик событий, прикрепленный к #main:

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>