Pregunta

Alguien sabe por qué la siguiente expresión jQuery funciona en Firefox, pero no en IE o Chrome?

$('form :hidden:last').attr('name')

Una declaración de alerta revela que en IE la expresión no está definido.

ACTUALIZACIÓN:. Aquí es algo de HTML que falla

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
   <head>
      <script type="text/javascript" src="/js/jquery-1.3.2.min.js">
      </script>
      <script type="text/javascript">
         function addItem() {
           var v = $('form :hidden:last').attr('name');
           var n = /(.*)input/.exec(v);
           var newPrefix;
           if ( n[1].length == 0 ) {
             newPrefix = '1';
           } else {
             newPrefix = parseInt(n[1])+1;
           }
           var lastExercise = $('form tr:last select:first').attr('value');
           var oldElem = $('form tr:last');
           var newElem = oldElem.clone(true);
           var lastHidden = $('form :hidden:last');
           lastHidden.val(newPrefix);
           var pat = '=\"'+n[1]+'input';
           newElem.html(newElem.html().replace(new RegExp(pat, 'g'), '=\"'+newPrefix+'input'));
           newElem.appendTo('table');
           $('form tr:last select:first').attr('value', lastExercise);
           $('form :hidden:last').val('');
         }
         function removeItem() {
           var rows = $('form tr');
           if ( rows.length > 2 ) {
             rows.filter(":last").remove();
             $('form :hidden:last').val('');
           } else {
             alert('Cannot remove any more rows');
           }
         }
      </script>
   </head>
   <body>
         <form autocomplete="off" method="post" action="">
            <div>
               <input type="button" onclick="addItem(); return false;" value="Add Item" />
               <input type="button" onclick="removeItem(); return false;" value="Remove Last Item" />
            </div>
            <table>
               <tr>
                  <th>Name</th>
                  <th>Weight</th>
               </tr>
               <tr>
                  <td>
                     <input type="text" name="input1" id="input1" value="" />
                  </td>
                  <td>
                     <input type="text" name="input2" id="input2" value="" />
                     <select name="input3" class="unitsInput">
                        <option value="0">
                           Pounds
                        </option>
                        <option value="1">
                           Kilograms
                        </option>
                     </select>
                  </td>
                  <td>
                     <input type="hidden" name="input4" id="input4" value="" />
                  </td>
               </tr>
            </table>
            <div>
               <select name="input8">
                  <option value="0">0</option>
                  <option value="1">1</option>
                  <option value="2">2</option>
               </select>
            </div>
            <div>
               <input type="submit" name="submit" id="submit" value="Submit" />
            </div>
         </form>
   </body>
</html>

No hay solución correcta

Otros consejos

Es el JQuery envuelto en el un $(document).ready( ... )?

Por ejemplo:

$(document).ready(function() {
    $('form :hidden:last').attr('name')
});

Es esencial hacer esto para asegurarse de que el DOM se haya cargado por completo antes de su código de jQuery comienza a ejecutar. De lo contrario, no hay DOM (Document) para que pueda consultar.

No se ejecuta esta consulta después de DOM está totalmente cargado y utilizando la última versión de jQuery? El ejemplo anterior de Dan funciona bien incluso en IE6 para mí.

Yo era capaz de conseguir que se ejecute bien en IE7.
¿Cómo se ve el código HTML como?

Esto es lo que se parece a la mía:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>

<body>
<form action="" method="get" name="testform">
<input name="bob" type="hidden" value="" />
<input name="steve" type="hidden" value="" />
<input name="william" type="hidden" value="" /></form>
<script type="text/javascript">
    $(document).ready(function(){
        alert($('form :hidden:last').attr('name'));
    });
</script>
</body>
</html>

Parece que el IE trata los elementos de opción al final como ocultos. Cambiar todos los "...: ocultos ..." selectores en el javascript. "... de entrada: oculto ..." parece resolver el problema

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top