JavaScript dynamiquement ajouté ne trouvant pas les champs ajoutés dynamiquement dans IE

Question

J'ai une table qui a un bouton pour "Ajouter des lignes". Ce bouton ajoute une ligne dynamiquement avec JQuery. Cela fonctionne en copiant le premier ... et en remplaçant tous les id = ".." avec un nombre incrémenté.

Le problème est que les lignes ont une YUI saisie semi-automatique qui ressemble à ce qui suit:

<td> 
    <input type="hidden" name="location_num[0]" value="508318" maxLength="25" style="width:230px" id="location_num[0]"/> 
    <input type="textbox" name="location_numDisplayDesc[0]" value="WINNIPEG" maxLength="25" style="width:230px" id="location_numDisplayDesc[0]"/> 
    <div id="Container_location_num[0]" style="display:inline;"></div> 

    <script type="text/javascript"> 

     // Initialize autocomplete 
     var location_numAC = new YAHOO.widget.AutoComplete(
      "location_numDisplayDesc[0]", 
      "Container_location_num[0]", 
      locationDataSource, 
      acConfig); 

     location_numAC.useShadow = true 
     location_numAC.useIFrame = true 
     location_numAC.dataErrorEvent.subscribe(acErrorFunction); 

     // Format results to include the reference number 
     location_numAC.formatResult = function(resultItem, query) { 
      return resultItem[0]; 
     }; 

     // Clear key before request 
     location_numAC.dataRequestEvent.subscribe(function fnCallback(e, args) { 
     YAHOO.util.Dom.get("location_num[0]").value = ""; }); 

     // Set key on item select 
     location_numAC.itemSelectEvent.subscribe(function(event, args) { 
      YAHOO.util.Dom.get("location_num[0]").value = args[2][1]; 
     }); 

     // Clear key when description is cleared 
     location_numAC.textboxBlurEvent.subscribe(function fnCallback(e, args) { 
      if (isEmpty(YAHOO.util.Dom.get("location_numDisplayDesc[0]").value)) { 
       YAHOO.util.Dom.get("location_num[0]").value = ""; 
      } // end if 
     }); 
    </script> 
</td> 

Ce code fonctionne bien dans Firefox et les autocompletes nouvellement créés fonctionnent, mais dans IE (6 & 7) Je suis obtenir une erreur qui signifie que location_num_AC n'est pas créé avec succès. Je crois que c'est parce qu'il ne lit pas les nouvelles entrées ou div comme il se doit. J'ai essayé d'envelopper le javascript avec

$("Container_location_num[0]").ready(function {...}); 

mais cela ne semble pas fonctionner. Est-ce que quelqu'un a d'autres idées?

Answer 1

Les champs de formulaire insérés dans le DOM dans IE ne s'ajoutent pas à la collection de formulaires comme vous pouvez vous y attendre.

Normalement, vous pouvez vous référer à un champ de formulaire de deux façons:

document.forms[0]["myFormName"]; 
document.forms[0][12]; 

C'est, par son nom de champ de formulaire ou par son index. Mais lorsque vous ajouter un champ de formulaire pour le DOM dans IE vous ne peut pas se référer à elle par son nom, seulement par son index. Si votre code (ou tout code de support) recherche un champ de formulaire dans la collection par son nom, vous avez évidemment un problème. Si votre seule clé est le nom, vous pouvez parcourir tous les champs du formulaire par index et trouver ce que vous cherchez, mais cela va évidemment être une opération linéaire. Vous pouvez également faire une boucle et trouver les champs de formulaire qui sont indexés numériquement mais pas par nom et mettre à jour l'objet formulaire vous-même. Je n'ai pas assez de détails pour savoir comment (ou si) cela se produit dans votre projet, mais c'est une de ces bizarreries IE qui semble jouer un rôle puisque vous ajoutez dynamiquement des champs.