IE не разрешает событие onClick для динамически созданного элемента DOM 'a'

Question

У меня проблемы с Internet Explorer. У меня есть ссылка, которая дублирует элемент загрузки файла в форме. Код, который дублирует, также добавляет гиперссылку на дублированный элемент загрузки, который должен удалить дублированный элемент, просто удалите эту ссылку.

Проблема в том, что этот код отлично работает в firefox, но он не запускается вообще в IE. Забудьте, как код выписан - событие onClick, которое я прикрепляю к элементу, не срабатывает вообще!

Я создаю мой удалить элемент ссылки, как это в функции:

var a = document.createElement('a'); 
a.setAttribute('href', "javascript:void(0);"); 
a.setAttribute('class', 'delete'); 
a.setAttribute('onClick', 'removeThisElement(idOfParentContainer, this)'); 

container.appendChild(a); 

Это отлично работает в Firefox, но это не срабатывает вообще в IE. Я проверил dom с помощью IE-инспектор, и ссылка получилась красиво, однако прикрепленный к нему класс не был обработан или не применен, и ни одно из них не было запущено, даже если оно физически добавлено к ссылке на html. По какой-то причине событие onClick даже не стреляет независимо от того, какой код я в него вставляю, даже если его предупреждение. Я что-то упустил. :(

---

Великий получил первую часть вопроса решена путем присоединения события, используя AddEvent однако, почему это не CSS рендеринга я имею в виду класс, прикрепленный к элементу не делает вообще по какой-то странной причине :(

---

Хорошего совет действительно. - Я переписывание моего кода, чтобы избежать функций SetAttribute и вместо того, чтобы портировать всю эту манипуляцию с DOM в JQuery Спасибо за помогает ребята

Answer 1

обработчиков событий не атрибутам DOM, то атрибут существует в разметке только - я не уверен, почему FF это. Я пойду на исследование, которое теперь я хочу знать.

Обновление: кажется, смешанные чувства о том, являются ли обработчики событий атрибутами DOM или нет. Мне кажется, что это ошибка MS, поскольку они внутренне не рассматривают их как атрибуты, в то время как спецификация HTML указывает, что они очень много. Прямыми следствиями этого являются то, что многие вещи! IE рассмотрит атрибуты не могут быть установлены с помощью setAttribute в IE, включая привязки обработчика событий и, что немаловажно, и стиль, класс и имя. очевидно, IE8 исправляет это, но я до сих пор не установлен, поэтому я не могу проверить.

Между тем, для привязки события вместо этого используется пара addEventListener/attachEvent или (менее предпочтительно, потому что это прямое назначение), установите a.onclick прямо на ваш целевой метод (или, скорее, на закрытие вашего метода).

Чтобы исправить ваш стиль, не применяемый должным образом, используйте element.style = foo; или (лучше) element.className = bar.

По существу проблема setAttribute. Избегайте использования.

For reference...

Answer 2

Как annakata сказал, что вы должны использовать addEventListener/attachEvent. Однако, если вы wan't, чтобы установить OnClick прямой вы можете использовать:

a.onclick = function() { removeThisElement(idOfParentContainer, this); }; 

Answer 3

На самом деле, для целей кросс-браузер, то лучше использовать Jquery.

$('#exampleCA').createAppend("a", { href: '#', style: "background-color: red;", onclick: 'alert (1);' }, "aaabbb"); 

Это создаст тег с текстом aaabbb, href = "#", красным фоном и событием предупреждения для клика.

Answer 4

Если вы ищете многоразовые, решение X-браузер, следующая функция работает для IE, FF и Opera:

function addEvent(obj, type, fn) { 
    if (obj.attachEvent) { 
     obj['e'+type+fn] = fn; 
     obj[type+fn] = function(){obj['e'+type+fn](window.event);} 
     obj.attachEvent('on'+type, obj[type+fn]); 
    } else 
     obj.addEventListener(type, fn, false); 
    } 

Answer 5

Просто сделать это

var element = document.createElement("input"); 
element.class = "className"; 
element.style.display = "none"; 
element.style.position = "absolute"; 
element.id = "someid"; 
element.type = "file"; 
element.onchange = function(){ 
        // do onchange functions here 
        } 
// do the following that removes all browser dependecies 
$(document.body).append(element); 
$("#someid").click(); //click the button programatically using its id 
$(element).remove(); // remove the element