jQuery的克隆元素被改变了可变

编辑：jQuery的克隆元素被改变了可变

工作示例现在jsbin.com/ivukar/10

这里是我想要做的，归纳为核心的步骤没有所有的细节那对你来说是没有意义的：

从DOM克隆现有的div并将该克隆存储在变量中
从DOM
删除该分区追加克隆DIV到DOM
进行更改到div中的DOM
HTML内容删除div和插入克隆再次

现在执行以下步骤，让我们说我们的div的HTML内容为“测试”，我希望以下内容：

变量已经存储有内容的div“测试”
事业部从DOM
股利去除附加到DOM与内容“测试”
事业部的页面改变有内容“改变”
事业部删除的网页上。 DIV追加到身体再次与内容“测试”，因为存储在一个变量，应该不会被改变的DOM

受到影响，但会发生什么，一旦是为我作出这样的改变元素的html内容使用例如：$('#element').html('altered');它也改变了变量的内容......

我看不出为什么会这样做，因为只有在将变量追加到DOM时才引用该变量，我没有改变变量的内容......

这是一个JsBin链接，所以你可以看到我的意思。

或可替代这里是示例代码：

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script> 
var saved = ''; 

function my_clone() 
{ 
saved = $('#el').clone(); 
$('#output').append("<a href='#' onclick='my_remove();'>Remove version on screen</a> ----- This removes any element with the id 'el'<br>"); 
} 

function my_remove() 
{ 

$('#el').remove(); 
$('#output').append("<a href='#' onclick='my_append();'>Append clone to body</a> ----- This takes the cloned object stored in the variable 'saved' and appends it to the html body<br>"); 

} 

function my_append() 
{ 

$('body').append(saved); 
$('#output').append("<a href='#' onclick='my_alter();'>Alter .html() of element</a>----- This alters the html of any element with the id 'el'<br>"); 

} 

function my_alter() 
{ 

$('#el').html('altered'); 
$('#output').append("<a href='#' onclick='my_remove_again();'>Remove version on screen again</a>----- This removes any element with the id 'el'<br>"); 

} 

function my_remove_again() 
{ 
$('#el').remove(); 
$('#output').append("<a href='#' onclick='my_append_again();'>Append clone to body</a> ----- This again takes the object stored in the 'saved' variable, which is separate from the DOM and should not have been affected by the html change and appends to the html body<br>"); 
} 

function my_append_again() 
{ 
$('body').append(saved); 
} 


</script> 
<style> 
#el {color:red;} 
</style> 
</head> 
<body> 

<div id="el"> 
    <div id="various">Various</div> 
    <div id="sub">Sub 
     <div id="and-sub-sub">And Sub-Sub</div> 
    </div> 
    <div id="elements">Elements</div> 
</div> 

<br><br> 
<div id="output"> 
<a href="#" onclick="my_clone();">Clone</a> ------ This stores the clone into a global variable called 'saved'<br> 
</div> 

</body> 
</html>

谁能告诉我在哪里，我错了吗？

谢谢。

来源

2013-04-23 CMR

的问题是，你被分配实际的DOM元素saved而非HTML内容。

的老把戏：

saved = $("#el").clone().wrap('<div/>').parent().html();

你先换克隆在父div其HTML返回。

更新JSBIN http://jsbin.com/ivukar/4

参考：Get DOM element as string

来源

2013-04-23 14:54:47

感谢。在我的实时系统中，正在被克隆的元素中有输入，而只是克隆.html（）会丢失输入中的任何东西。例如。 [http://jsbin.com/ivukar/5/]你知道一种获取输入数据的方法吗？干杯。 – CMR 2013-04-23 15:06:19

我有完全相同的问题。我通过在删除内容之前将输入值保存在局部变量中，然后在所有内容之后用'$（“input＃abc”）.val（a）;''替换空的输入值来解决它，其中'a'是存储值从以前。 – 2013-04-23 15:25:45

谢谢，我会试试 – CMR 2013-04-23 15:38:42

-1

saved = $('#el').clone();

应该

saved = $('#el').clone().html();

来源

2013-04-23 14:35:02 user1

jQuery的克隆元素被改变了可变

回答

相关问题