Bal*_*usC 23 jquery clone internet-explorer-7 internet-explorer-6
这个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'run它,点击Add几次按钮.在每次点击时,您都应该看到<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>
我google了一下,发现了这个非常相似的问题,他修复了它并发布了一个代码片段,它应该是什么样子.不幸的是,这正是我已经做过的,所以我怀疑他只是在IE8中测试,而不是在IE6/7中.除了那个特定的主题,谷歌没有透露太多.
任何见解？或者我真的要回去document.createElement？
注意:我知道我可以为每个输入元素使用相同的名称并将它们作为数组检索,但上面只是一个基本的例子,实际上我真的需要更改name属性,因为它不仅包含索引,还有其他信息,如parentindex,order等.它已被用于添加/重新排列/删除(子)菜单项.
编辑:这与这个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+)(\])/, 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作为一个跨浏览器库应该涵盖引擎盖下的这个特定问题？
这是一个在所有浏览器中设置元素名称的函数,甚至是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技巧完美无缺!
不是答案，是对所提出问题的分析：
<!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 liclone1 = ul.find('li:last').clone(true);
var liclone2 = ul.find('li:last')[0].cloneNode(true);
var liclone3 = $( ul.find('li:last')[0].cloneNode(true) );
var liclone4 = $( '<li><input type="text" name="foo[88]"></li>' );
var linew = document.createElement("li");
linew.innerHTML = '<input type="text" name="foo[99]">';
$('#showsource').text("");
$('#showsource').text($('#showsource').text() + $(liclone1)[0].outerHTML);
$('#showsource').text($('#showsource').text() + $(liclone2)[0].outerHTML);
$('#showsource').text($('#showsource').text() + $(liclone3)[0].outerHTML);
$('#showsource').text($('#showsource').text() + $(liclone4)[0].outerHTML);
$('#showsource').text($('#showsource').text() + $(linew)[0].outerHTML);
$('#showsource').text($('#showsource').text() + $(ul)[0].outerHTML);
$('#showsource').text($('#showsource').text() + $(ul)[0].innerHTML);
});
});
</script>
</head>
<body>
<ul id="ul">
<li><input type="text" name="foo[0]"></li>
<li><input type="text" name="foo[1]"></li>
</ul>
<button id="add">Add</button>
<pre id="showsource"></pre>
</body>
</html>
结果：
<LI><INPUT name=foo[1]>
<LI><INPUT name=foo[1]>
<LI><INPUT name=foo[1]>
<LI><INPUT name=foo[88]></LI>
<LI><INPUT name=foo[99]></LI>
<UL id=ul><LI><INPUT name=foo[0]>
<LI><INPUT name=foo[1]> </LI></UL><LI><INPUT name=foo[0]>
<LI><INPUT name=foo[1]> </LI>
所以我可以分析它，唯一的方法是用 createElement 创建一个新的 li 或用 $(...) 创建对象