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

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

7 голосов
/ 21 апреля 2009

У меня проблемы с 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. Спасибо за помощь, ребята

Ответы [ 5 ]

8 голосов
/ 21 апреля 2009

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

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

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

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

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

Для справки ...

3 голосов
/ 21 апреля 2009

Как сказал аннаката, вы должны использовать addEventListener / attachEvent. Однако, если вы не хотите устанавливать прямую связь, вы можете использовать: 

  a.onclick = function() { removeThisElement(idOfParentContainer, this); };
1 голос
/ 07 июня 2016

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

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
0 голосов
/ 22 апреля 2009

Если вы ищете многоразовое решение для 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 );
  }
0 голосов
/ 21 апреля 2009

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

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

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

...