Hinzufügen von onclick-Ereignis zu neu hinzugefügtem Element in JavaScript

Question

Ich habe versucht, onclick-Ereignis zu neuen Elementen hinzufügen, die ich mit JavaScript hinzugefügt.

Das Problem ist, wenn ich document.body.innerHTML überprüfe, kann ich tatsächlich sehen, dass onclick = alert ('blah') zum neuen Element hinzugefügt wird.

Aber wenn ich auf dieses Element klicke, sehe ich nicht, dass die Alarmbox funktioniert. In der Tat JavaScript Zusammenhang etwas funktioniert nicht ..

hier ist das, was ich neues Element hinzuzufügen, verwenden:

function add_img() { 
    var elemm = document.createElement('rvml:image'); 
    elemm.src = 'blah.png'; 
    elemm.className = 'rvml'; 
    elemm.onclick = "alert('blah')"; 
    document.body.appendChild(elemm); 
    elemm.id = "gogo"; 
    elemm.style.position='absolute'; 
    elemm.style.width=55; 
    elemm.style.height=55; 
    elemm.style.top=200; 
    elemm.style.left=300; 
    elemm.style.rotation=200; 
} 

Hier ist, wie ich diese Funktion aufrufen:

<button onclick=add_img()>add image</button> 

nun das Bild zeichnet sich perfekt im Browser. Aber wenn ich auf das Bild klicke, bekomme ich diese Warnung nicht.

Answer 1

.onclick sollte auf eine Funktion statt einer Zeichenfolge festgelegt werden. Versuchen Sie

elemm.onclick = function() { alert('blah'); }; 

stattdessen.

Answer 2

nicht sicher, aber versuchen:

elemm.addEventListener('click', function(){ alert('blah');}, false); 

Answer 3

Sie ein Ereignis von Zeichenfolge nicht zuordnen können. Verwenden Sie das:

elemm.onclick = function() {Alarm ('blah'); };

Answer 4

Kurze Antwort: Sie den Handler auf eine Funktion setzen:

elemm.onclick = function() { alert('blah'); }; 

Etwas längere Antwort: Sie werden noch ein paar Zeilen Code schreiben müssen, um die konsequent in allen Browsern zu arbeiten.

Tatsache ist, dass selbst der etwas längere Code, der dieses spezielle Problem in einer Reihe gängiger Browser lösen könnte, immer noch mit eigenen Problemen verbunden ist. Wenn Sie sich also nicht für die browserübergreifende Unterstützung interessieren, sollten Sie mit dem ganz kurzen gehen. Wenn Sie sich darum kümmern und absolut nur diese eine Sache arbeiten wollen, gehen Sie mit einer Kombination von addEventListener und attachEvent. Wenn Sie in der Lage sein möchten, ausführlich Objekte zu erstellen und Ereignis-Listener im gesamten Code hinzuzufügen und zu entfernen, und dies über mehrere Browser hinweg durchführen möchten, sollten Sie diese Verantwortung definitiv an eine Bibliothek wie jQuery delegieren.

Answer 5

Ich glaube nicht, dass Sie das auf diese Weise tun können. Sie sollten verwenden:

void addEventListener( 
    in DOMString type, 
    in EventListener listener, 
    in boolean useCapture 
); 

Dokumentation right here.

Answer 6

Sie haben drei verschiedene Probleme. Zunächst sollten Werte in HTML-Tags in Anführungszeichen gesetzt werden! Wenn Sie dies nicht tun, kann dies den Browser verwirren und zu Problemen führen (obwohl dies hier wahrscheinlich nicht der Fall ist). Zweitens sollten Sie der onclick-Variablen tatsächlich eine Funktion zuweisen, wie es jemand anderes gemeint hat. Dies ist nicht nur der richtige Weg, um es vorwärts zu bringen, sondern es macht die Dinge viel einfacher, wenn Sie versuchen, lokale Variablen in der onclick-Funktion zu verwenden. Schließlich können Sie entweder addEventListener oder jQuery versuchen, jQuery hat den Vorteil einer schöneren Schnittstelle.

Oh, und stellen Sie sicher, dass Ihr HTML validiert! Das könnte ein Problem sein.

Answer 7

Falls Sie nicht den gesamten Code schreiben möchten, den Sie einmal in der von Ihnen aufgerufenen Funktion geschrieben haben. Verwenden Sie den folgenden Code mit jQuery:

$ (Element) .on ('click', function() {add_img();});