jQuery克隆的元素在变量中被更改 [英] jquery cloned element being altered in variable
问题描述
这是我想要做的，总结为核心步骤，没有所有对您来说毫无意义的细节:
Here is what I'm trying to do, summed up into the core steps without all the detail that would be fairly meaningless to you:
- 从DOM克隆现有的div并将该克隆存储在变量中
- 从DOM中删除该div
- 将克隆的div附加到DOM
- 更改DOM中div的HTML内容
- 删除div并再次插入克隆
现在，按照以下步骤操作，假设div的HTML内容为测试"，那么我会期望以下内容:
Now following these steps, let's say the HTML content of our div was "test", I would expect the following:
- 可能将div与内容"test"一起存储
- 从DOM中删除div
- 将内容测试"附加到DOM
- 页面上的Div更改为内容已更改"
- 该页面上的div已删除. Div再次附加到正文中，并带有内容"test"，因为该内容存储在变量中，并且不受DOM更改的影响
但是发生的是，一旦我对元素的html内容进行了更改，例如:$('#element').html('altered');它也更改了变量的内容...
And yet what happens is that as soon as I make that change to the html content of the element, using for example: $('#element').html('altered'); It changes the content of the variable as well...
我不知道为什么会这样做，因为仅在将变量附加到DOM时才引用该变量，因此我不会更改变量的内容...
I cannot see why it would do that, as the variable is only ever referenced when appending it to the DOM, I am not changing the content of the variable whatsoever...
这是一个 JsBin 链接，因此您可以了解我的意思.
Here is a JsBin link so you can see what I mean.
或者下面是示例代码:
<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>
有人可以告诉我我在哪里错吗?
Could anyone tell me where I am going wrong here?
谢谢.
推荐答案
问题是您正在将实际DOM元素分配给saved而不是HTML内容.
The problem was that you were assigning the actual DOM element to saved rather than the HTML content.
一个老把戏:
saved = $("#el").clone().wrap('<div/>').parent().html();
您首先将克隆包装在返回其HTML的父级div中.
You first wrap the clone in a parent div whose HTML you return.
更新了JSBIN http://jsbin.com/ivukar/4
参考:将DOM元素作为字符串获取
Updated JSBIN http://jsbin.com/ivukar/4
Reference: Get DOM element as string
这篇关于jQuery克隆的元素在变量中被更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
