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

Posted 2023-02-22

【中文标题】jQuery 不会附加在文档就绪时声明的克隆

【英文标题】：jQuery won't append a clone declared at document ready

【发布时间】：2014-04-06 00:58:02

【问题描述】：

我的问题是，如果我在页面加载时创建一个克隆变量，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 事件中移动变量 deceleration，则追加完全按预期工作。

【问题讨论】：

所以你知道问题所在。还需要帮助吗？

【参考方案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));
    );
);

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

【讨论】：

感谢您的快速回复。但是，我觉得我的问题措辞不正确，并没有提供我总体意图的正确示例。 Click here 转到我更新的问题。

【参考方案2】：

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

您可能不知道的单个 DOM 元素的一个特性是它只能有一个父元素。这是有道理的，因为 DOM 树将元素向上、向下和横向连接起来，并且只有一个父元素链接（以及一个 next 和一个 prev 同级元素链接），但有一个包含多个子元素的列表。

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

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

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

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