如何复制一个div的onclick事件？

Question

如何复制一个div的onclick事件？

26

当点击一个按钮时，我希望复制一个div。我尝试了下面的代码，但它没有起作用。有人能帮我吗？

HTML

<div id="duplicater"> 
duplicate EVERYTHING INSIDE THIS DIV
</div>

JavaScript

function duplicate()
{
var div = duplicate("div");
    div.id = "duplicater";
div.appendChild(duplicate("duplicater"));
}

- Opoe

1

你想复制 div（最终得到两个 div），还是要复制 div 内部的内容？ - Jordi

2

我觉得我一直在重复这句话，但是 id 必须是唯一的。你不应该在同一页上有两个带有 id="duplicater" 的元素。 - nickf

有道理！我会添加一个计数器。 - Opoe

不要添加计数器。在JS中只需保留对创建的元素的引用（可能将它们存储在数组中）。 - Quentin

3个回答

1

<table>
<tr>
<td>
<div id="duplicater"> 
    duplicate EVERYTHING INSIDE THIS DIV
</div>
</td>
</tr>
</table>
<button id="button">Click me</button>

$("#button").on('click', function (e) {
    e.preventDefault();
    var $self = $(this);
    $self.before($self.prev('table').clone());
});

- Tanya Sinha

0

你能把这个 div 改成 class 吗？如果可以的话，那么 this 可能适合你：

# application.js
$(function(){
  $('.photo:last').after('<a href="#" id="new_resource">Add another image<a/><br/>');

  $('a[href=#]').click(function(){
    $(this).before($('.photo:last').clone());

    $('.photo:last input').each(function(){
      $(this).removeAttr("value");
    });

    $('.photo:last input[type=hidden]').remove();

    return false;
  });
})

#html
<div class="photo"
  <label>label</label>  
  <input type="file"></input>
</div>

在这里编辑代码：

- stephenmurdoch

2

你应该注明你正在使用jQuery。 - Felix Kling

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Felix Kling · Accepted Answer

你正在创建一个无限递归！

function duplicate()
{
    var div = duplicate("div");

该函数一遍又一遍地调用本身。请使用 cloneNode() 方法:

HTML：

<div id="duplicater0"> 
duplicate EVERYTHING INSIDE THIS DIV
</div>

JavaScript:

var i = 0;

function duplicate() {
    var original = document.getElementById('duplicater' + i);
    var clone = original.cloneNode(true); // "deep" clone
   clone.id = "duplicater" + ++i; // there can only be one element with an ID
    clone.onclick = duplicate; // event handlers are not cloned
    original.parentNode.appendChild(clone);
}

演示

或者不使用ID:

function duplicate() {
    var clone = this.cloneNode(true); // "deep" clone
    clone.id = ""; // there can only be one element with an ID
    clone.onclick = duplicate; // event handlers are not cloned
    this.parentNode.appendChild(clone);
}

更新：

如果你想在按钮点击时克隆div，可以使用稍微不同的版本：

HTML：

<button id="button" onclick="duplicate()">Click me</button>
<div id="duplicater"> 
    duplicate EVERYTHING INSIDE THIS DIV
</div>

JavaScript：

var i = 0;
var original = document.getElementById('duplicater');

function duplicate() {
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "duplicater" + ++i;
    // or clone.id = ""; if the divs don't need an ID
    original.parentNode.appendChild(clone);
}

如果你不是在表单中使用，应该使用<button>代替<input type="button">。 工作演示2