Cambiar el nombre attr del elemento de entrada clonado en jQuery no funciona en IE6 / 7

Question

Jan 19, 2010, 04:34 PM

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

Cambiar el nombre attr del elemento de entrada clonado en jQuery no funciona en IE6 / 7

EstaSSCCE lo dice todo

<!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>

Copiar y pegar, ejecútelo.Add Botón varias veces. En cada clic debería ver el código HTML de la<ul> para aparecer en el<pre id="showsource"> y el código esperado debería 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>

Esto funciona como se espera en FF, Chrome, Safari, Opera e IE8.

Sin embargo, IE6 / 7 falla al cambiar elname Atribuye y produce 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 googleado un poco y encontradoeste problema muy similar, lo arregló y publicó un fragmento de código como debería haber sido. Desafortunadamente, esto es exactamente lo que ya he hecho, así que sospecho que solo estaba probando en IE8, no en IE6 / 7. Aparte de ese tema en particular, Google no reveló mucho.

¿Alguna idea? O realmente tengo que agarrar de nuevo adocument.createElement?

Nota: Sé que puedo usar el mismo nombre para cada elemento de entrada y recuperarlos como una matriz, pero el ejemplo anterior es solo un ejemplo básico, en realidad realmente necesito cambiar el atributo de nombre, porque no solo contiene el índice, pero también otra información como el índice principal, el orden, etc. Se ha utilizado para agregar / reorganizar / eliminar (sub) elementos de menú.

Editar: esto está relacionado coneste error, ¿El jQuery (estoy usando 1.3.2) no parece crear entradas de esa manera? Lo siguiente simplemente funciona:

$('#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());
});

Pero no puedo imaginar que soy el único que encontró este problema con jQuery. Incluso un simple$('<input>').attr('name', 'foo') no funciona en IE6 / 7. ¿No se supone que jQuery como una biblioteca de crossbowser para cubrir este problema en particular bajo el capó?

Deja tu comentario