Question

我需要克隆一个带有子项作为触发器的box div元素，在每个框中应该与第一个一样，我的代码不能正常工作，因为它只适用于第一个元素而第二个div元素失败（即使在同一个盒子里），它只能工作一次。这是我的代码。

var container = document.querySelector(".container");
var box = document.getElementsByClassName("box");

for(var i = 0; i < box.length; i++){
  
  var clone = box[i].cloneNode(true);
  var y = box[i].children[0];
  
  y.addEventListener("click", function(){
    container.appendChild(clone);
  }, false)
}

.container {
  border: 1px solid black;
  padding: 10px;
}
.box {
  width: 100px;
  height: 100px;
  background: red;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="box">
      <button class="clone">Clone</button>
    </div>
  </div>
</body>
</html>

Answer 1

您需要在父元素上附加事件侦听器，然后使用event对象检查目标属性，如果是按钮则运行代码。

var container = document.querySelector(".container");

container.addEventListener('click', function({target}) {
  if (target.nodeName = 'BUTTON' && target.classList.contains('clone')) {
    const clone = target.parentNode.cloneNode(true);
    container.appendChild(clone)
  }
})

.container {
  border: 1px solid black;
  padding: 10px;
}
.box {
  width: 100px;
  height: 100px;
  background: red;
}

<div class="container">
  <div class="box">
    <button class="clone">Clone</button>
    <p>1</p>
  </div>
  <div class="box">
    <button class="clone">Clone</button>
    <p>2</p>
  </div>
</div>

Answer 2

cloneNode()不会继承绑定到该按钮的事件。通过将eventListener添加到祖先节点来使用 Event Delegation （window和document对象是可以接受的，但我选择.container更实用，因为它接近）。当祖先节点检测到单击按钮时，我们使用Event.target和Event.currentTarget事件对象属性来确定单击了哪个按钮（e.target）和侦听器（e.currentTarget）。为了更好的衡量，我添加了另一个条件，只允许按钮为e.target。

因此，每当您有多个e.target类按钮具有共同的祖先节点时，请将事件侦听器添加到祖先节点，而不是向每个按钮添加事件侦听器。

在演示中评论的详细信息

演示

// Reference the ancestor node
var con = document.querySelector(".container");

// Register click event on div.con--callback dupeParent()
con.addEventListener('click', dupeParent);

// Pass the Event Object through
function dupeParent(e) {
  /* if the clicked node (e.target) is not the node registered on 
  || click event (e.currentTarget / div.con)...
  || if the clicked node (e.target) is a button...
  || clone the button's parent and add it to div.con
  */
  if (e.target !== e.currentTarget) {
    if (e.target.tagName === 'BUTTON') {
      var clone = e.target.parentElement.cloneNode(true);
      this.appendChild(clone);
    }
    // Otherwise quit
  } else {
    return;
  }
}

.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
  padding: 10px;
}

.box {
  width: 100px;
  height: 100px;
  background: red;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div class="container">
    <div class="box">
      <button class="clone">Clone</button>
    </div>
  </div>
</body>

</html>

Answer 3

试试这个，

$(document).on("click", ".clone", function () { 
    $('div.box:first').clone().insertAfter($('div.box:last'));
});

Answer 4

有两种方法。

Delgation

将事件委托给容器的子项。

// Attach event to container and delegate to the children
var $container = $('.container');
$container.on('click', '.clone', function(e) {
  $container.append($(e.target).parent().clone());
});

克隆事件和数据

复制孩子的所有数据和事件。

// Attach event to the child and enable copying of events
var $container = $('.container');
$('.clone').on('click', function(e) {
  $container.append($(e.target).parent().clone(true));
});

如何在每个元素目标

4 个答案:

演示

Delgation

克隆事件和数据