Question

我的问题是，如果我在页面加载时创建一个克隆变量，jQuery只会附加一次。怪异！

<p>Click to copy</p>
<div id="container">
    <div class="element">This is an element!</div>
</div>

$(document).ready(function () {
    var obj = $(".element").clone(true);
    $("p").click(function () {
        //alert(obj); //Just to see if the variable is still an object.
        $("#container").append(obj);
    });
});

以下是我的CodePen链接http://codepen.io/anon/pen/Fwduf

这是我点击5次后得到的结果：

点击复制

这是一个元素！
  这是一个元素！

我应该看到的是什么：

点击复制

这是一个元素！
  这是一个元素！
  这是一个元素！
  这是一个元素！
  这是一个元素！
  这是一个元素！

有趣的是，如果我在click事件中移动变量减速度，则追加将完全按预期工作。

Answer 1

你需要每次都克隆它

<强> Codepen Demo

$(document).ready(function () {
    var obj = $(".element");
    $("p").click(function () {
        //alert(obj); //Just to see if the variable is still an object.
        $("#container").append(obj.clone(true));
    });
});

在您的情况下，您只创建一个新的克隆元素，之后您只是将现有元素从一个地方移动到另一个地方

Answer 2

Arun的回答是正确的，但没有解释为什么每次想要新元素时都需要克隆模板元素。

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

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

由于交互仅以用户界面速度（即鼠标点击）运行，因此您可以简化代码：

$("p").click(function () {
    $("#container").append($(".element:first").clone(true));
});

jQuery不会附加在文档就绪时声明的克隆

2 个答案:

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