Menu
I am using jQuery v1.6.4. Here is the test case for my problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="container"></div>
<div id="clone-tpl">I am a clone template</div>
<script type="text/javascript">
$(function(){
var clone = $('#clone-tpl').clone();
clone.attr('id','other'+Math.random());
clone.text('I am a clone');
$('#container').append(clone);
alert($('#container').html());
alert($('#clone-tpl').attr('id'));
var clone2 = $('#clone-tpl').clone();
clone2.attr('id','other'+Math.random());
clone2.text('I am a clone 2');
$('#container').append(clone2);
alert($('#container').html());
alert($('#clone-tpl').attr('id'));
});
</script>
</body>
</html>
In Mozilla Firefox and Internet Explorer 9 it works as expected: clones clone-tpl two times, changes id and appends the clones to the container div. The container div stays intact. The alert output log is the following:
<div id="other0.7574357943876624">I am a clone</div>
clone-tpl
<div id="other0.7574357943876624">I am a clone</div><div id="other0.1724491511655708">I am a clone 2</div>
clone-tpl
But on Internet Explorer 7 it messes things up with the clone2, look what alert says:
<DIV id=other0.1851332940530379>I am a clone</DIV>
clone-tpl
<DIV id=other0.1851332940530379>I am a clone</DIV><DIV id=clone-tpl>I am a clone 2</DIV>
other0.6041996510541515
I have no idea, how alert($('#clone-tpl').attr('id')) could suddenly give something else than clone-tpl? After all, if I select element by id attribute clone-tpl, the id attribute MUST be clone-tpl, but it is not!
What is wrong? Why does IE7 change id of the cloning source if I create a second clone?
By the way, if I revert back to jQuery v1.4.2, IE7 starts cloning normally.
Is it a bug in jQuery v1.6.4? Is there any workaround for it?
P.S. I really would like to avoid reverting to 1.4.2 because 1.6 has some useful features which help me to overcome some other jQuery bug: http://bugs.jquery.com/ticket/5684?version=10 .
536
I had clone issues with IE , too
Finally had to write my own simple clone for IE when tired of bugs. It's not universal neither brilliant but in this case it can't be done much, IE sucks.
It can be modified according to one's needs.
function shimNode(jqObj){
var html = jqObj.html();
var id = jqObj[0].id;
var classes = jqObj.attr('class');
var styles = jqObj.attr('style');
var pattern = ['<div id="',id,'" class="',classes,'" style="',styles,'">',html,'</div>'].join('');
return jQuery(pattern);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
