Alterar o atributo attr do elemento de entrada clonado no jQuery não funciona no IE6 / 7

Question

Jan 19, 2010, 04:34 PM

internet-explorer-7 internet-explorer-6 jquery clone

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?

leaveComments