Internet Explorer 7 中的 jQuery 1.6.4 克隆问题答案

【问题标题】：jQuery 1.6.4 cloning problems in Internet Explorer 7Internet Explorer 7 中的 jQuery 1.6.4 克隆问题
【发布时间】：2011-09-24 13:32:34
【问题描述】：

我正在使用 jQuery v1.6.4。这是我的问题的测试用例：

  <!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>

在 Mozilla Firefox 和 Internet Explorer 9 中，它按预期工作：克隆 clone-tpl 两次，更改 id 并将克隆附加到容器 div。容器 div 保持不变。告警输出日志如下：

<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

但在 Internet Explorer 7 上，它与 clone2 搞砸了，看看警报说什么：

<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

我不知道，alert($('#clone-tpl').attr('id')) 怎么会突然给出除了 clone-tpl 之外的东西？毕竟，如果我通过 id 属性 clone-tpl 选择元素，id 属性必须是 clone-tpl，但它不是！

怎么了？如果我创建第二个克隆，为什么 IE7 会更改克隆源的 id？

顺便说一句，如果我恢复到 jQuery v1.4.2，IE7 会开始正常克隆。

这是 jQuery v1.6.4 中的错误吗？有什么解决方法吗？

附：我真的很想避免恢复到 1.4.2，因为 1.6 有一些有用的功能可以帮助我克服其他一些 jQuery 错误：http://bugs.jquery.com/ticket/5684?version=10。

【问题讨论】：

好像是个bug stackoverflow.com/questions/7243384/jquery-clone-html-in-ie-bug
@Mansuro - 谢谢，你是对的。我刚刚在 jQuery bug tracker 网站上找到了它，希望他们能尽快修复它。同时我将使用Javascript原生setAttribute，它工作得很好。

标签： jquery internet-explorer clone

【解决方案1】：

我也遇到了 IE 的克隆问题

当厌倦了错误时，最后不得不为 IE 编写自己的简单克隆。它既不是通用的也不是很好，但在这种情况下它不能做太多，IE很烂。

可以根据自己的需要进行修改。

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

【讨论】：