JQuery fonctionne dans Firefox, mais pas dans IE

Quelqu'un sait pourquoi l'expression JQuery suivante fonctionne dans Firefox mais pas dans IE ou Chrome? Une instruction d'alerte révèle que dans IE, l'expression est indéfinie.JQuery fonctionne dans Firefox, mais pas dans IE

MISE À JOUR: Voici un code HTML qui échoue.

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

Source

2009-06-01 Khanpo

Fournissez du code HTML et vous obtiendrez cette réponse lickety-split. –

Dans le code que j'ai ajouté, la première ligne de addItem renvoie undefined. – Khanpo

J'ai réussi à le faire fonctionner correctement dans IE7.
À quoi ressemble votre HTML?

Voici ce que le mien ressemble:

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

Source

2009-06-01 03:22:19

Mon HTML est complexe. J'utilisais aussi IE6. Je vais essayer de trouver un exemple simple HTML qui échoue. – Khanpo

-vous exécutez cette requête après DOM est entièrement chargé et en utilisant la dernière version de jQuery? L'exemple ci-dessus de Dan fonctionne très bien même dans IE6 pour moi.

Source

2009-06-01 03:39:24 esycat

Votre JQuery est-il enveloppé dans le $(document).ready(...)?

Par exemple:

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

Il est essentiel de le faire pour faire en sorte que les DOM soit entièrement chargée avant votre code JQuery commence à exécuter. Sinon, il n'y a pas de DOM (document) à interroger.

Source

2009-06-01 03:42:20 Soviut

Il semble que IE traite les éléments de l'option à la fin comme cachés. Changer tous les sélecteurs "...: hidden ..." dans le javascript à "... input: hidden ..." semble résoudre le problème.

Source

2009-06-01 16:18:05 Khanpo

JQuery fonctionne dans Firefox, mais pas dans IE

Répondre

Questions connexes