Question

我试图做到这一点，以便添加的每个子输入都具有与父输入相同的事件侦听器。

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的单个委托事件处理程序：

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>

Answer 2

cloneNode方法不会复制事件侦听器。

克隆节点会复制其所有属性及其值，包括固有（内联）侦听器。它不会复制使用addEventListener（）添加的事件侦听器或分配给元素属性的事件侦听器（例如node.onclick = fn）。

cloneNode description

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

我不会说这不一定是实现此目标的最佳方法，而是尝试在此处坚持您的总体策略：

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

<head>
	<title>Cube by Charden</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	.
  .
  .
  .
  
</head>

For Loop在1处停止，不计算添加到DOM中的元素

4 个答案: