在jQuery中更改克隆输入元素的名称attr在IE6 / 7中不起作用
这个SSCCE说明了一切:
Test $(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()); }); });
Copy’n’paste’n’run它,单击
Add
按钮几次。 在每次点击时,你应该看到
- 的HTML代码显示在
,预期的代码大致应该是:
这在FF,Chrome,Safari,Opera和IE8中的预期效果如预期。
但是,IE6 / 7无法更改name
属性并产生如下:
我google了一下,发现了这个非常相似的问题 ,他修复了它并发布了一个代码片段,它应该是什么样子。 不幸的是,这正是我已经做过的,所以我怀疑他只是在IE8中进行测试,而不是在IE6 / 7中进行测试。 除了那个特定主题,谷歌没有透露太多。
任何见解? 或者我真的必须回到document.createElement
?
注意:我知道我可以为每个输入元素使用相同的名称并将它们作为数组检索,但上面只是一个基本的例子,实际上我真的需要更改name属性,因为它不仅包含索引,还有其他信息,如父索引,排序等。它已被用于添加/重新排列/删除(子)菜单项。
编辑:这与这个错误有关 ,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+)(\])/, function(f, p1, p2, p3) { return p1 + (parseInt(p2) + 1) + p3; }); var newinput = $(''); oldinput.replaceWith(newinput); liclone.appendTo(ul); $('#showsource').text(ul.html()); });
但我无法想象我是唯一一个遇到过jQuery问题的人。 即使是简单的$('').attr('name', 'foo')
也不适用于IE6 / 7。 是不是jQuery作为一个跨浏览器库应该涵盖引擎盖下的这个特定问题?
这是一个在所有浏览器中设置元素名称的函数,甚至是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(""), false); }); } else { $(elems).attr('name', name); } }
我发现在不同版本的IE中使用replaceElement和outerHTML并不可靠。 但上面的mergeAttributes技巧完美无缺!
我为这个问题创建了一个部分解决方案,我在这里描述: http : //www.danconnor.com/dynamic-name-input-attributes-with-ie-and-jquery-clones.html
基本上:
$(some_cloned_element).each(function(i, elem){ var newName = "yay_i_love_my_new_name"; if ($.browser.msie === true){ // evil browser sniffing *cries* $(elem).replaceWith(document.createElement( this.outerHTML.replace(/name=\w+/ig, 'name='+newName+'_'+i) )); } else { $(elem).attr('name',newName+'_'+i); } $("body").append(some_cloned_element); });
肯定很糟糕,但绝对有效。
我想知道你是否在IE中遇到这个错误 (即使使用jQuery)?
基本上在IE中你不能改变元素的名称属性(常规或克隆)(然后通过javascript按名称重新访问它们),尽管你可以提交它们(例如输入元素)并让它们成功提交。
不是答案,是对问题的分析:
Test
结果:
所以我可以分析它,唯一的方法是使用createElement创建一个新的li或用$(…)创建对象
这篇文章也是关于这个主题的,这让我对这个问题有所了解。
在IE中由jQuery设置的iframe`name`属性的奇怪行为
我知道这是旧的,但是因为我没有找到任何对我有用的东西,我做了一个非常简单的解决方案,但是,一个丑陋的解决方案:
使用jquery将html转换为文本,然后使用js字符串函数按照您的意愿执行,并使用jquery将字符串作为html插入。
只为那些仍然遇到过这种情况的人,比如我自己:)