如果您单击选项 2,它会 append 来自页面加载的原始克隆,但不会在每次单击该按钮时重复。
<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
有什么想法吗?
最佳答案
您可能没有意识到,单个 DOM 元素的一个特性是它只能有一个父元素。这是有道理的,因为 DOM 树将元素向上、向下和横向相互连接,并且只有一个父元素链接(以及一个下一个和一个上一个同级元素链接),但有一个包含多个子元素的列表。
当你克隆一个元素时,你创建了一个新的 DOM 元素,它实际上是 DOM 树中的一个新分支(如果只是一个小分支的话)。调用 append 将元素添加到它的新父元素,但它也将克隆的父链接指向它的新父元素。通过一遍又一遍地 append 相同的元素,您只是在更改单个元素的父元素(即在 DOM 树中移动它)。
相反,每次需要一个时,只需为断开连接的克隆对象(以其原始状态)创建一个新克隆:
JSFiddle:http://jsfiddle.net/TrueBlueAussie/7h8MK/2/
$("#container").append(obj.clone(true));
关于javascript - jQuery 不会在页面加载时 append 克隆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22174241/