Question

如果单击选项2，它会从页面加载中附加原始克隆，但每次单击该按钮时都不会重复。

<a href="#" class="modify">1. Turn the element red...</a><br />
<a href="#" class="copy">2. Append the original black element...</a><br /><br />
<div id="container">
    <div class="element">This is an element!</div>
</div>

$(document).ready(function () {
    var obj = $(".element").clone(true);
    $(".copy").click(function (e) {
        e.preventDefault();
        //alert(obj); //Just to see if it still exists.
        $("#container").append(obj);
    });
    $(".modify").click(function (e) {
        e.preventDefault();
        $(".element").css("color", "#F00");
    });
});

这是我的CodePen链接http://codepen.io/anon/pen/dsvLm

有什么想法吗？

Answer 1

您可能没有意识到的单个DOM元素的一个特性是它只能有一个父。这是有道理的，因为DOM树将元素向上，向下和横向连接到彼此，并且只有一个父元素链接（以及单个next和单个prev兄弟元素链接），但是包含多个子元素的列表。

当你克隆一个元素时，你创建一个新的DOM元素，它实际上是DOM树中的一个新分支（如果只是一个小分支）。调用append会将元素添加到其新父级，但它还会将克隆的父链接指向其新父级。通过一遍又一遍地添加相同的元素，您只需更改单个元素的父元素（即在DOM树中移动它）。

相反，每次需要时，只需对已断开连接的克隆对象（处于其原始状态）进行新的克隆：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/7h8MK/2/

$("#container").append(obj.clone(true));

Answer 2

您需要在追加时创建克隆。使用：

var obj = $(".element");
$(".copy").click(function (e) {
    e.preventDefault();
    //alert(obj); //Just to see if it still exists.
    $("#container").append(obj.clone(true));
});

<强> Demo

jQuery不会在页面加载上附加克隆

2 个答案:

JSFiddle：http://jsfiddle.net/TrueBlueAussie/7h8MK/2/