IE no permite el evento onClick en el elemento DOM 'a' creado dinámicamente

Question

Tengo problemas con Internet Explorer. Tengo un enlace que duplica un elemento de carga de archivos en un formulario. El código que se duplica también agrega un hipervínculo al elemento de carga duplicado que se supone que debe eliminar el elemento duplicado, simplemente elimine este enlace.

El problema es que este código funciona bien en firefox pero no funciona en IE. Olvídese de cómo se escribe el código: ¡el evento onClick que adjunto al elemento no se dispara en absoluto!

estoy creando mi Retire el elemento de enlace como este en la función:

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

container.appendChild(a); 

Esto funciona bien en Firefox pero no se dispara en absoluto en el IE. Comprobé el dom usando el inspector de IE y el enlace se ejecutó bien, sin embargo, la clase adjunta no se ha procesado o no se ha aplicado, y el evento no se ha activado aunque se haya agregado físicamente al enlace en el html. Por algún motivo, el evento onClick ni siquiera se activa independientemente del código que coloque, incluso si es una alerta. Me estoy perdiendo de algo. :(

---

Gran consiguió la primera parte del problema resuelto mediante la fijación eventos utilizando AddEvent sin embargo por qué no es la prestación css me refiero a la clase unida al elemento no hace nada por alguna extraña razón :(

---

Un buen consejo de hecho -. estoy volver a escribir el código para evitar la función setAttribute y en lugar de portar toda esta manipulación DOM para jQuery Gracias por la ayuda a los hombres

Answer 1

los controladores de eventos no son atributos DOM, la atributo existe en el marcado solo - No estoy seguro de por qué FF lo dice. Investigaré ahora porque quiero saber.

Actualización: parece haber sentimientos encontrados sobre si los manejadores de eventos son atributos DOM-válidos o no. Me parece que esto es culpa de MS ya que internamente no los trata como atributos, mientras que la especificación HTML indica que lo son en gran medida. Las consecuencias directas de esto son varias cosas. IE consideraría que los atributos no se pueden establecer con setAttribute en IE, incluidos los enlaces del manejador de eventos y, lo que es más importante, el estilo , clase y nombre. aparentemente IE8 soluciona esto pero todavía no lo he instalado así que no puedo verificar.

Mientras tanto, para el enlace de eventos use el par addEventListener/attachEvent en su lugar, o (menos preferiblemente porque es una asignación directa) establezca un clic directamente en su método objetivo (o más probablemente un cierre en su método).

Para arreglar su estilo no se aplica correctamente utilice element.style = foo; o (mejor) element.className = bar.

Esencialmente el problema es setAttribute. Evita usarlo.

For reference...

Answer 2

Como annakata dijo que debe utilizar addEventListener/attachEvent. Sin embargo, si quieres probar para establecer el onclick dirigir puede utilizar:

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

Answer 3

En realidad, para los fines a través del navegador, es mejor usar jQuery.

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

Esto creará la etiqueta con el texto aaabbb, href = "#", el fondo rojo y evento de alerta por clic.

Answer 4

Si usted está buscando un reutilizable, solución de X-navegador, la función siguiente funciona para IE, FF y 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

Basta con hacer esto

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