jQuery 1.6.4 cloning problems in Internet Explorer 7

Question

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 .

seems like it's a bug http://stackoverflow.com/questions/7243384/jquery-clone-html-in-ie-bug — Mansuro, Sep 24 '11 at 14:52
@Mansuro - thanks, you are right. I just found it in jQuery bug tracker site, let's hope they'll fix it soon. Meanwhile I'll use Javascript native setAttribute, it works just fine. — JustAMartin, Sep 24 '11 at 18:22

score 2 · Accepted Answer · answered Feb 08 '13 at 14:51

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);
}

jQuery 1.6.4 cloning problems in Internet Explorer 7

1 Answers1