如何在每个元素目标中使用嵌套触发器克隆具有相同类的 div

我需要克隆一个带有子元素作为触发器的盒子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>

您需要在

父元素上附加事件侦听器，然后使用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>

cloneNode()不会

传递绑定到按钮的事件。通过将 eventListener 添加到祖先节点来使用事件委派(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>

试试这个，

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

有两种方法。

脱落

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

// 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));
});

演示

脱落

克隆事件和数据

相关内容

最新更新

热门标签：