这个
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技巧完美无瑕!