更改jQuery中克隆的输入元素的名称属性在IE6/7中不起作用 [英] Changing name attr of cloned input element in jQuery doesn't work in 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中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
