Dynamically added JavaScript not finding dynamically added fields in IE

I have a table which has a button to "Add Rows". This button adds a row dynamically with JQuery. It works by copying the first ... and then replacing all the id=".." with an incremented number.

The problem is that the rows have a YUI AutoComplete which looks like the following:

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

This code works fine in Firefox and the newly c开发者_如何学Goreated AutoCompletes work, but in IE (6 & 7) I am getting an error that means that the location_num_AC is not being created successfully. I believe that it's because that it's not reading the newly created inputs or div as it should. I've tried wrapping the javascript with

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

but that didn't seem to work. Does anyone have any other ideas?

Form fields that are inserted into the DOM in IE don't add to the forms collection as you might expect.

Normally you can refer to a form field one of two ways:

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

That is, by its form field name or by its index. But when you add a form field to the DOM in IE you can't refer to it by name, only by its index. If your code (or any supporting code) is looking for a form field in the collection by its name you've obviously got a problem.

If your only key is the name you can loop through all the form fields by index and find what you're looking for, but that's obviously going to be a linear operation. You can also loop through and find which form fields are indexed numerically but not by name and update the form object yourself.

I don't have enough detail to know how (or if) this is occurring in your project, but it's one of those IE quirks that sounds like it might be playing a role since you're adding fields dynamically.