Подтвердить что ты не робот

Установка атрибута id элемента ввода динамически в IE: альтернатива для метода setAttribute

Я ищу динамическую установку атрибута ID элементов ввода HTML, которые динамически создаются в моем приложении.

Моя реализация отлично работает с методом setAttribute в Firefox. Любые идеи или решения по рабочей реализации в IE будут оценены.

 var hiddenInput = document.createElement("input");
    hiddenInput.setAttribute("id", "uniqueIdentifier");
    hiddenInput.setAttribute("type", "hidden");                     
    hiddenInput.setAttribute("value", ID);
    hiddenInput.setAttribute("class", "ListItem");

Я изменил некоторые примеры кода из блогов, связанных с этой проблемой, которые предлагают следующий рабочий стол. Снова бит Firefox работает хорошо, но бит IE doens't

var hiddenInput = null;

try { 
hiddenInput  = document.createElement('<input name=\''+"hiddenInputName"+'\'   />');
                    hiddenInput.id = "uniqueIdentifier";
                    //alert(document.getElementById("uniqueIdentifier")); 
                   hiddenInput.type = "hidden";
                } catch (e) { }            
                if (!hiddenInput || !hiddenInput.name) { // Not in IE, then
                     var hiddenInput = document.createElement("input");
    hiddenInput.setAttribute("id", "uniqueIdentifier");
    hiddenInput.setAttribute("type", "hidden");                     

            }

Приветствия.

4b9b3361

ОТВЕТЫ

Ответ 1

Этот код работает в IE7 и Chrome:

var hiddenInput = document.createElement("input");
    hiddenInput.setAttribute("id", "uniqueIdentifier");
    hiddenInput.setAttribute("type", "hidden");                     
    hiddenInput.setAttribute("value", 'ID');
    hiddenInput.setAttribute("class", "ListItem");

$('body').append(hiddenInput);

Может быть, проблема где-то еще?

Ответ 2

Забудьте setAttribute(): он сильно сломан и не всегда делает то, что можно ожидать в старом IE (IE <= 8 и режимах совместимости в более поздних версиях). Вместо этого используйте свойства элемента. Это, как правило, хорошая идея не только для этого конкретного случая. Замените свой код следующим, который будет работать во всех основных браузерах:

var hiddenInput = document.createElement("input");
hiddenInput.id = "uniqueIdentifier";
hiddenInput.type = "hidden";                     
hiddenInput.value = ID;
hiddenInput.className = "ListItem";

Обновление

Неприятный взлом во втором блоке кода в вопросе не нужен, и код выше отлично работает во всех основных браузерах, включая IE 6. См. http://www.jsfiddle.net/timdown/aEvUT/. Причина, по которой вы получаете null в своем alert(), заключается в том, что когда он вызывается, новый вход еще не находится в документе, поэтому вызов document.getElementById() не может найти его.

Ответ 3

Использовать метод jquery attr. Он работает во всех браузерах.

var hiddenInput = document.createElement("input");
$(hiddenInput).attr({
    'id':'uniqueIdentifier',
    'type': 'hidden',
    'value': ID,
    'class': 'ListItem'
});

Или вы можете использовать следующий код:

var e = $('<input id = "uniqueIdentifier" type="hidden" value="' + ID + '" class="ListItem" />');

Ответ 4

Я не знал о проблеме с setAttribute в IE? Однако вы можете напрямую установить свойство expando на самом node:

hiddenInput.id = "uniqueIdentifier";

Ответ 5

В документации говорится:

Если вам нужно установить атрибуты, которые также сопоставляются с dot-свойством JavaScript (например, href, style, src или обработчики событий), предпочитайте это сопоставление.

Итак, просто измените назначение id, значение, и вы должны сделать это.

Ответ 6

У меня была такая же проблема! Мне не удалось изменить/установить атрибут идентификатора элементов. Он работал во всех других браузерах, но не в IE. Вероятно, это не относится к вашей проблеме, но вот что я в итоге сделал:

Фон

Я создавал сайт MVC с вкладками jquery. Я хотел динамически создавать вкладки и выполнять обратную передачу AJAX на сервере, сохраняя вкладку в базе данных. Я хотел использовать уникальный идентификатор в форме int для вкладок, поэтому я не стал бы беспокоиться, если бы пользователь создал две вкладки с тем же именем. Затем я использовал уникальный идентификатор для идентификации вкладок, например:

<ul>
<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove List</span></li>
<ul>

Когда я затем реализовал функции удаления на вкладках, обратный вызов использует индекс, witch равен 0. Тогда у меня не было способа отправить уникальный идентификатор на сервер, чтобы уничтожить запись БД. Обратный вызов для события tabremove дает событие jquery и параметры ui. С одной строкой кода я мог получить идентификатор span:

var dbIndex = event.currentTarget.id;

Проблема заключалась в том, что у тега span нет идентификатора. Поэтому в обратном вызове create я попытался установить идентификатор покупки, извлекая идентификатор из href, как это:

ui.tab.parentNode.id = ui.tab.href.substring(ui.tab.href.indexOf('#list-') + 6);

Это отлично работает в FireFox, но не в IE. Поэтому я попробовал несколько других:

//ui.tab.parentNode.setAttribute('id', ui.tab.href.substring(ui.tab.href.indexOf('#list-') + 6));
//$(ui.tab.parentNode).attr({'id':ui.tab.href.substring(ui.tab.href.indexOf('#list-') + 6)});
//ui.tab.parentNode.id.value = ui.tab.href.substring(ui.tab.href.indexOf('#list-') + 6);

Никто из них не работает! Поэтому после нескольких часов тестов и Googeling я сдался и сделал вывод, что IE не может установить атрибут идентификатора элемента динамически.

Как я сожалею, это, вероятно, не относится к вашей проблеме, но я думал, что буду делиться.

Решение

И для всех вас, кто нашел это в Googleing по проблеме с вкладками, у меня было то, что я закончил делать в обратном вызове tabsremove, чтобы решить проблему:

var dbIndex = event.currentTarget.offsetParent.childNodes[0].href.substring(event.currentTarget.offsetParent.childNodes[0].href.indexOf('#list-') + 6);

Наверное, это не самое сексуальное решение, но он решил проблему. Если у кого есть какие-либо данные, пожалуйста, поделитесь...