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

前端之家收集整理的这篇文章主要介绍了在jQuery中更改克隆输入元素的名称attr在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>

Copy’n’paste’n’nun它,点击添加按钮几次。在每次点击时,您应该看到< ul>的HTML代码显示在< pre id =“showsource”>预期代码应大致为:

<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中工作。

但是,IE6 / 7更改name属性失败,并产生如下:

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

googled有点找到this very similar problem,他修复它并发布了一个代码片段,应该如何看起来像。不幸的是,这正是我已经做的,所以我怀疑他只是在IE8测试,而不是IE6 / 7。除了这个特定的主题之外,谷歌没有透露太多。

任何见解?还是我真的要抢回document.createElement?

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

编辑:这与this bug有关,jQuery(我使用的是1.3.2)是不是似乎以这种方式创建输入?以下只是工作:

$('#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+)(\])/,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作为一个crossbrowser库应该涵盖这个特定的问题在引擎盖下?

解决方法

这是一个功能,将设置所有浏览器中的元素的名称,甚至IE6和IE7。它从 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和outerHTML是不可靠的。但上面的mergeAttributes技巧完美无瑕!

原文链接:https://www.f2er.com/jquery/183048.html

猜你在找的jQuery相关文章