如何在每个元素目标中使用嵌套触发器克隆具有相同类的div
[英]how to clone a div with a same class with nested trigger in each element target
问题描述
i need to clone a box div element with children as a trigger, in each box should work the same with the first one, my code not working properly since it's only working for the first element and failed for the second div element (even in the same box), it only working once. 
我需要克隆一个带有子项作为触发器的box div元素，在每个框中应该与第一个相同，我的代码不能正常工作，因为它只适用于第一个元素而第二个div元素失败（即使在同一个盒子），它只工作一次。 here is my code below. 这是我的代码如下。
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 个解决方案
解决方案1
2 2018-03-14 12:14:24
You need to attach event listener on parent element and then use event object to check target property and if its button then you run your code. 您需要在父元素上附加事件侦听器，然后使用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>
解决方案2
1 已采纳 2018-03-14 12:37:19
cloneNode() doesn't carry over events bound to the button. cloneNode()不会携带绑定到按钮的事件。 Use Event Delegation by adding the eventListener to an ancestor node ( window and document objects are acceptable but I chose .container being more practical because of its proximity). 通过将eventListener添加到祖先节点来使用事件委派 （ window和document对象是可以接受的，但我选择.container因其接近而更实用）。 When ancestor node detects a button is clicked, we use the Event.target and Event.currentTarget Event Object properties to determine exactly which button was clicked ( e.target ) and the listener ( e.currentTarget ). 当祖先节点检测到单击按钮时，我们使用Event.target和Event.currentTarget事件对象属性来确定单击了哪个按钮（ e.target ）和侦听器（ e.currentTarget ）。 For good measure I added another condition that permits only a button to be e.target . 为了更好的衡量，我添加了另一个条件，只允许按钮为e.target 。
So whenever you have multiple e.target s like buttons that have an ancestor node in common, add the event listener to the ancestor node instead of adding an event listener to each button. 因此，每当您有多个e.target类的按钮具有共同的祖先节点时，请将事件侦听器添加到祖先节点，而不是向每个按钮添加事件侦听器。
Details commented in Demo 详情在演示中评论
Demo 演示
// 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>
解决方案3
0 2018-03-14 12:10:53
Try this, 试试这个，
$(document).on("click", ".clone", function () {
$('div.box:first').clone().insertAfter($('div.box:last'));
});
解决方案4
0 2018-03-14 12:32:05
There are two approaches. 有两种方法。
Delgation Delgation
Delegate event to children of the container. 将事件委托给容器的子项。
// Attach event to container and delegate to the children
var $container = $('.container');
$container.on('click', '.clone', function(e) {
$container.append($(e.target).parent().clone());
});
Cloning events and data 克隆事件和数据
Copy all data and events for the child. 复制孩子的所有数据和事件。
// 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));
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.