Alterar o atributo attr do elemento de entrada clonado no jQuery não funciona no IE6 / 7
esteSSCCE diz tudo:
<!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>
Copie e cole, clique no íconeAdd
botão várias vezes. Em cada clique, você deve ver o código HTML do<ul>
para aparecer no<pre id="showsource">
e o código esperado deve ser aproximadamente:
<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>
Isso funciona como esperado no FF, Chrome, Safari, Opera e IE8.
No entanto, o IE6 / 7 falha ao alterar oname
atributo e produz como:
<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>
I pesquisado um pouco e encontreiesse problema muito parecido, ele o corrigiu e postou um snippet de código como deveria ser. Infelizmente, isso é exatamente o que eu já fiz, então suspeito que ele estava testando apenas no IE8, não no IE6 / 7. Além desse tópico em particular, o Google não revelou muito.
Alguma ideia? Ou eu realmente tenho que voltar paradocument.createElement
?
Nota: Eu sei que posso usar apenas o mesmo nome para cada elemento de entrada e recuperá-los como uma matriz, mas o acima é apenas um exemplo básico, na verdade, eu realmente preciso alterar o atributo name, porque ele não contém apenas o índice, mas também outras informações, como índice-pai, pedidos etc. Ele tem sido usado para adicionar / reorganizar / remover (sub) itens de menu.
Editar: isso está relacionado aesse bug, O jQuery (estou usando 1.3.2), portanto, não parece criar entradas dessa maneira? O seguinte funciona apenas:
$('#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());
});
Mas não consigo imaginar que sou o único que encontrou esse problema com o jQuery. Mesmo um simples$('<input>').attr('name', 'foo')
não funciona no IE6 / 7. O jQuery não é uma biblioteca de cross-browsers para cobrir esse problema em particular?