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

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

1. Turn the element red...
2. Append the original black element...

This is an element!
 $(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树将元素向上,向下和横向连接到彼此,并且仅具有单个父元素链接(以及单个下一个和单个prev兄弟元素链接),而是具有多个子元素的列表。

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

相反,每次需要时,只需对已断开连接的克隆对象(处于其原始状态)进行新的克隆:

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

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

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

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

演示