如何复制 div onclick 事件？答案

【问题标题】：How can I duplicate a div onclick event?如何复制 div onclick 事件？
【发布时间】：2010-12-13 08:46:28
【问题描述】：

我希望在单击按钮时复制一个 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"));
}

【问题讨论】：

您是要复制 div（并最终得到两个 div），还是复制 div 内的内容？
我觉得这样说有点破纪录，但ids 必须是独一无二的。您不应该在同一页面上有两个带有 id="duplicater" 的元素。
有道理！我会添加一个计数器
不添加计数器。只需在 JS 中保留对创建元素的引用（可能将它们存储在数组中）。

标签： javascript html copy duplicates

【解决方案1】：

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

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

Working DEMO

或者没有 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">。

Working DEMO 2

【讨论】：

哇，非常感谢，不过它只能工作一次！我可以添加这样的按钮吗？
非常感谢！你真的帮了我:)
好的，这很好用，但是除非我把 javascript 放在的末尾，否则它不起作用。这是为什么？我在中加载了一个无法正常工作的外部 javascript 文件，因此我将不得不进行一些更改。
@eshellborn：您似乎正试图在元素存在之前访问它！看看这个问题：stackoverflow.com/questions/14028959/….
好的，谢谢。这对我来说很有意义，但对于所有其他事情，我的脚本在头脑中工作，甚至调用“尚未创建”的特定元素。那么，为什么这种情况会有所不同呢？

【解决方案2】：

你能把 div 改成一个类吗？如果是这样，那么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>

编辑代码here：

【讨论】：

您应该添加您正在使用 jQuery。

【解决方案3】：

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

【讨论】：