更改jQuery中克隆的输入元素的名称属性在IE6/7中不起作用

问题描述：

此 SSCCE 可以全部说明:

<!doctype html>
<html lang="en">
    <head>
        <title>Test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#add').click(function() {
                    var ul = $('#ul');
                    var liclone = ul.find('li:last').clone(true);
                    var input = liclone.find('input');
                    input.attr('name', input.attr('name').replace(/(foo\[)(\d+)(\])/, function(f, p1, p2, p3) {
                        return p1 + (parseInt(p2) + 1) + p3;
                    }));
                    liclone.appendTo(ul);
                    $('#showsource').text(ul.html());
                });
            });
        </script>
    </head>
    <body>
        <ul id="ul">
            <li><input type="text" name="foo[0]"></li>
        </ul>
        <button id="add">Add</button>
        <pre id="showsource"></pre>
    </body>
</html>

复制'n'粘贴'n'运行它，多次单击Add按钮.每次单击时，您应该看到<ul>的HTML代码显示在<pre id="showsource">中，并且预期的代码应大致为:

Copy'n'paste'n'run it, click the Add button several times. On every click you should see the HTML code of the <ul> to show up in the <pre id="showsource"> and the expected code should roughly be:

<li><input name="foo[0]" type="text"></li>
<li><input name="foo[1]" type="text"></li>
<li><input name="foo[2]" type="text"></li>
<li><input name="foo[3]" type="text"></li>

这在FF，Chrome，Safari，Opera和IE8中可以正常工作.

This works as expected in FF, Chrome, Safari, Opera and IE8.

但是，IE6/7无法更改name属性，并生成如下内容:

However, IE6/7 fails in changing the name attribute and produces like:

<li><input name="foo[0]" type="text">
<li><input name="foo[0]" type="text">
<li><input name="foo[0]" type="text">
<li><input name="foo[0]" type="text"></li>

我用Google搜索并发现了这个非常相似的问题，他已将其修复并发布了一个代码段，看起来应该是什么样子.不幸的是，这正是我已经做过的，因此我怀疑他只是在IE8中进行测试，而不是在IE6/7中进行测试.除了该特定主题外，Google并没有透露太多信息.

I googled a bit and found this very similar problem, he fixed it and posted a code snippet how it should have look like. Unfortunately this is exactly what I already have done, so I suspect that he was only testing in IE8, not in IE6/7. Other than that particular topic Google didn't reveal much.

有什么见解?还是我真的必须回到document.createElement?

Any insights? Or do I really have to grab back to document.createElement?

注意:我知道我可以为每个输入元素使用相同的名称并将其作为数组检索，但是以上只是一个基本示例，实际上我真的需要更改name属性，因为它不仅包含索引，还包含其他信息，例如parentindex，ordering等.它已用于添加/重新排列/删除(子)菜单项.

:这与

this is related to this bug, The jQuery (I'm using 1.3.2) does thus not seem to create inputs that way? The following does just work:

$('#add').click(function() {
    var ul = $('#ul');
    var liclone = ul.find('li:last').clone(true);
    var oldinput = liclone.find('input');
    var name = oldinput.attr('name').replace(/(foo\[)(\d+)(\])/, function(f, p1, p2, p3) {
        return p1 + (parseInt(p2) + 1) + p3;
    });
    var newinput = $('<input name="' + name + '">');
    oldinput.replaceWith(newinput);
    liclone.appendTo(ul);
    $('#showsource').text(ul.html());
});

但是我无法想象我是唯一一个使用jQuery遇到此问题的人.即使简单的$('<input>').attr('name', 'foo')在IE6/7中也不起作用. jQuery是否不是应该作为跨浏览器库来掩盖这个特定问题的?

But I can't imagine that I am the only one who encountered this problem with jQuery. Even a simple $('<input>').attr('name', 'foo') doesn't work in IE6/7. Isn't jQuery as being a crossbrowser library supposed to cover this particular issue under the hoods?

答

这是一个将在所有浏览器(甚至是IE6和IE7)中设置元素名称的函数.它是根据 http://matts411.com/post/setting_the_name_attribute_in_ie_dom 中的代码改编的.

Here is a function that will set the name of an element in all browsers, even IE6 and IE7. It is adapted from the code at http://matts411.com/post/setting_the_name_attribute_in_ie_dom.

function setElementName(elems, name) {
  if ($.browser.msie === true){
    $(elems).each(function() {
      this.mergeAttributes(document.createElement("<input name='" + name + "'/>"), false);
    });
  } else {
    $(elems).attr('name', name);
  }
}

我发现在不同版本的IE中，使用replaceElement和externalHTML并不可靠.但是上面的mergeAttributes技巧很完美！

I found that using replaceElement and outerHTML was not reliable across different versions of IE. But the mergeAttributes trick above works perfectly!

更改jQuery中克隆的输入元素的名称属性在IE6/7中不起作用

相关推荐