IE nicht zulassen onClick-Ereignis auf dynamisch erstellten DOM 'a' Element

Question

Ich habe Probleme mit dem Internet Explorer. Ich habe einen Link, der ein Datei-Upload-Element in einem Formular dupliziert. Der Code, der dupliziert, hängt auch einen Hyperlink an das duplizierte Upload-Element an, das das duplizierte Element entfernen soll, um diesen Link einfach zu entfernen.

Das Problem ist, dass dieser Code in Firefox läuft, aber es läuft überhaupt nicht in IE. Vergessen Sie, wie der Code ausgeschrieben ist - das Ereignis onClick, das ich an das Element anschließe, wird überhaupt nicht ausgelöst!

ich meinen Link Entfernen Element wie folgt in der Funktion zu erstellen:

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

container.appendChild(a); 

Dies funktioniert in Firefox in Ordnung, aber es funktioniert nicht in IE ausgelöst. Ich überprüfte das Dom mit IE-Inspektor und der Link wurde nett gerendert, aber die Klasse, die daran angehängt wurde, wurde nicht gerendert oder angewendet und das Ereignis wurde auch nicht ausgelöst, obwohl es physisch an den Link im HTML angehängt wurde. Aus irgendeinem Grund feuert das onClick-Ereignis nicht einmal ab, egal welchen Code ich hineinlege, auch wenn es eine Warnung ist. Fehle ich hier etwas? :(

---

Groß bekam Teil eines des Problems gelöst durch die Ereignisse mit addEvent jedoch angebracht, warum nicht der CSS-Rendering ich die Klasse bedeuten das Element befestigt macht gar nicht aus irgendeinem seltsamen Grunde :(

---

Guter Rat in der Tat. - ich bin mein Code Umschreiben der setAttribute Funktion zu vermeiden und stattdessen alle diese DOM-Manipulation zu jquery Portierung Vielen Dank für die hilft Jungs

Answer 1

Eventhandler werden nicht DOM-Attribute, die Attribut existiert in Markup nur - ich bin mir nicht sicher, warum FF das so macht. Ich werde jetzt nachforschen, weil ich es wissen will.

Update: scheint gemischte Gefühle darüber zu sein, ob Eventhandler DOM-gültige Attribute sind oder nicht. Sieht für mich so aus, als wäre MS schuld daran, dass sie sie intern nicht als Attribute behandeln, während die HTML-Spezifikation darauf hinweist, dass sie es sehr sind. Die direkten Konsequenzen davon sind, dass eine Reihe von Dingen! IE würde berücksichtigen, dass Attribute nicht gesetzt werden können mit SetAttribute in IE einschließlich Eventhandler Bindings und vor allem auch Stil, Klasse und Name. anscheinend IE8 behebt das, aber ich habe immer noch nicht installiert, so dass ich nicht überprüfen kann.

In der Zwischenzeit für die Ereignisbindung das addEventListener/attachEvent-Paar verwenden oder (weniger bevorzugt, da es sich um eine direkte Zuweisung handelt) a.onclick direkt auf Ihre Zielmethode setzen (oder eher eine Schließung Ihrer Methode).

Um zu verhindern, dass Ihr Styling nicht korrekt angewendet wird, verwenden Sie element.style = foo; oder (besser) element.className = bar.

Im Wesentlichen ist das Problem setAttribute. Vermeide es zu benutzen.

For reference...

Answer 2

Wie annakata gesagt, Sie addEventListener/attachEvent verwenden sollten. Allerdings, wenn Sie die Onclick einstellen wan't richten Sie verwenden können:

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

Answer 3

Eigentlich für die Cross-Browser-Zwecke, es besser ist, JQuery zu verwenden.

Dies wird ein Tag mit Text aaabbb, href = "#", rotem Hintergrund und Alarmereignis für Klick erstellen.

Answer 4

Wenn Sie einen wiederverwendbar suchen, X-Browser-Lösung, die folgende Funktion funktioniert für IE, FF und 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

einfach tun, um diese

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