Dynamisch hinzugefügt JavaScript nicht dynamisch hinzugefügt Felder in IE zu finden

Question

Ich habe eine Tabelle, die eine Schaltfläche muss „Add Rows“. Diese Schaltfläche fügt eine Zeile dynamisch mit JQuery. Es funktioniert durch die erste Kopieren ... und dann alle id ersetzen = „..“ mit einer fortlaufenden Nummer.

Das Problem ist, dass die Zeilen ein YUI Auto-Vervollständigen haben, die wie folgt aussieht:

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

Dieser Code funktioniert in Firefox und das neu geschaffene autocompletes arbeiten, aber in IE (6 und 7) ich eine Störung erhalte, das bedeutet, dass die location_num_AC nicht erfolgreich erstellt werden. Ich glaube, dass es ist, weil, dass es nicht den neu erstellten Ein- oder div als Lese es soll. Ich habe versucht, die JavaScript-Verpackung mit

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

, aber das scheint nicht zu funktionieren. Hat jemand noch andere Ideen?

Answer 1

Formularfelder, die in das DOM in IE eingesetzt werden fügen Sie nicht auf die Sammlung Formen wie man erwarten könnte.

Normalerweise können Sie auf ein Formularfeld eines von zwei Arten beziehen:

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

Das heißt, durch seine Form Feldnamen oder durch seinen Index. Aber wenn man in ein Formularfeld auf das DOM in IE Sie nicht mit Namen darauf verweisen, nur durch seinen Index. Wenn Ihr Code (oder ein Stützcode) für ein Formularfeld in der Sammlung durch seinen Namen gesucht haben Sie bekommen offensichtlich ein Problem.

Wenn Ihre einzige Schlüssel ist der Name können Sie eine Schleife durch alle Formularfelder durch den Index und das finden, was Sie suchen, aber das ist offensichtlich eine lineare Operation sein würde. Sie können auch eine Schleife durch und finden Sie die Formularfelder numerisch indiziert werden, aber nicht mit Namen und aktualisieren Sie das Formular selbst widersprechen.

Ich habe nicht detailliert genug, zu wissen, wie (oder ob) dies in Ihrem Projekt auftritt, aber es ist einer jener IE Macken, die klingen wie könnte es eine Rolle spielen, da Sie Hinzufügen von Feldern dynamisch.