代码之家 › 专栏 › 技术社区 › Riantori

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

html javascript

Riantori · 技术社区 · 8 年前

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

4 回复 | 直到 8 年前

Nenad Vracar 8 年前

您需要在父元素上附加事件侦听器,然后使用 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>

Community Mohan Dere 6 年前

cloneNode() 不结转绑定到按钮的事件。使用 Event Delegation 通过将eventListener添加到祖先节点( window 和 document 对象是可以接受的,但我选择了 .container 由于其邻近性,因此更加实用)。当祖先节点检测到按钮被单击时,我们使用 Event.target 和 Event.currentTarget 事件对象属性来确定单击了哪个按钮( e.target )还有听众( e.currentTarget )。为了更好地衡量,我添加了另一个条件,只允许一个按钮 e、目标 。

所以当你有多个 e、目标 与具有共同祖先节点的按钮类似,将事件侦听器添加到祖先节点,而不是将事件侦听器添加到每个按钮。

演示中评论的详细信息

演示

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

Selvarani 8 年前

试试这个,

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

Mr. Polywhirl 8 年前

有两种方法。

删除

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

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