Динамически добавленный JavaScript не находит динамически добавленные поля в IE

Question

У меня есть таблица, в которой есть кнопка "Добавить строки". Эта кнопка добавляет строку динамически с JQuery. Он работает, копируя первый... и затем заменяя все id=".." на увеличенное число.

Проблема заключается в том, что строки имеют автозаполнение YUI, которое выглядит следующим образом:

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

Этот код отлично работает в Firefox, и только что созданные автозаполнения работают, но в IE (6 и 7) я получаю сообщение об ошибке, которое означает, что location_num_AC не создается успешно. Я полагаю, что это потому, что он не читает вновь созданные входы или div, как следует. Я пытался обернуть Javascript с

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

но это не сработало. У кого-нибудь есть другие идеи?

Answer 1

Поля формы, которые вставляются в DOM в IE, не добавляются в коллекцию форм, как вы могли бы ожидать.

Обычно вы можете обратиться к полю формы одним из двух способов:

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

То есть по имени поля формы или по индексу. Но когда вы добавляете поле формы в DOM в IE, вы не можете ссылаться на него по имени, только по его индексу. Если ваш код (или любой другой поддерживающий код) ищет поле формы в коллекции по имени, у вас, очевидно, возникла проблема.

Если вашим единственным ключом является имя, вы можете просмотреть все поля формы по индексу и найти то, что ищете, но это, очевидно, будет линейная операция. Вы также можете циклически проходить и находить, какие поля формы индексируются численно, но не по имени, и обновлять объект формы самостоятельно.

У меня недостаточно подробностей, чтобы знать, как (или если) это происходит в вашем проекте, но это одна из тех странностей IE, которые звучат так, будто они играют роль, поскольку вы добавляете поля динамически.