Question

我们可以复制/克隆HTML部分，包括所有附加的事件处理程序吗？

为简化概念，假设我有一个<div>，点击鼠标后会触发alert()。我想复制<div>以及与之关联的处理程序;因此，点击后，复制的<div>也应该触发警报。我可以复制好，但处理程序似乎没有正确复制。这是jsFiddle sample。

谢谢。

Answer 1

在true参数中提供.clone()，如文档中所述：

.clone（[withDataAndEvents] [，deepWithDataAndEvents]）

withDataAndEventsA 布尔值，指示是否应将事件处理程序和数据与元素一起复制。默认值为false。 *在jQuery 1.5.0中，默认值不正确true;它在1.5.1及更高版本中已更改回false。

deepWithDataAndEventsA 布尔值，指示是否应复制克隆元素的所有子项的事件处理程序和数据。默认情况下，其值与第一个参数的值匹配（默认为false）。

查看结果：http://jsfiddle.net/FdugW/

代码如下：

$(function() {
    $(".clickme").click(function() { alert("I am clicked!"); });

    $("a").click(function() {
        $("#clickme-1").clone(true).attr("id", "").appendTo("#container");
    });
});

Answer 2

使用.clone(true)代替.clone()。

$(function() {
    $(".clickme").click(function() { alert("I am clicked!"); });

    $("a").click(function() {
        $("#clickme-1").clone(true).attr("id", "").appendTo("#container");
    });
});

http://jsfiddle.net/KHbuh/1/

这也克隆了所有相关的jQuery数据，包括处理程序。

Answer 3

尝试：

$('div').clone(true).appendTo(document.body);

克隆HTML元素，包括其关联的处理程序

3 个答案: