Dinámicamente añadió JavaScript no encontrar campos añadidos de forma dinámica en el IE

Question

Tengo una tabla que tiene un botón para "agregar filas". Este botón añade una fila de forma dinámica con jQuery. Funciona mediante la copia del primero ... y volviendo a poner todo el id = ".." con un número incrementado.

El problema es que las hileras tienen una Autocompletar YUI que se parece a lo siguiente:

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

Este código funciona bien en Firefox y los de nueva creación se completa automáticamente a trabajar, pero en IE (6 y 7) Estoy recibiendo un error que significa que el location_num_AC no se ha creado correctamente. Creo que es porque que no está leyendo las entradas o div recién creados como debería. He intentado envolver el Javascript con

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

pero que no parecen funcionar. ¿Alguien tiene alguna otra idea?

Answer 1

Los campos del formulario que se insertan en el DOM en el IE no se suman a la colección de formas como se podría esperar.

Normalmente se puede hacer referencia a un campo de formulario de dos maneras:

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

Esto es, por su nombre de campo de formulario o por su índice. Pero cuando añadir un campo de formulario al DOM en IE no pueden se refieren a ella por su nombre, sólo por su índice. Si el código (o cualquier código de apoyo) está buscando un campo de formulario en la colección por su nombre obviamente has tiene un problema.

Si su única clave es el nombre que puede recorrer todos los campos del formulario por el índice y encontrar lo que está buscando, pero eso es, obviamente, va a ser una operación lineal. También puede recorrer y encontrar la que los campos del formulario son indexados numéricamente, pero no por su nombre y actualizar la forma de objeto a sí mismo.

No tengo suficiente detalle para saber cómo (o si) esto está ocurriendo en su proyecto, pero es uno de esos caprichos es decir, que suena como que podría estar jugando un papel, ya que está añadiendo campos dinámicamente.