Fügen Sie dem neu hinzugefügten Element in JavaScript das Ereignis onclick hinzu

Ich habe versucht, neuen Elementen, die ich mit JavaScript hinzugefügt habe, ein Ereignis onclick hinzuzufügen.

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

Aber wenn ich auf dieses Element klicke, sehe ich nicht, dass das Warnfeld funktioniert. Tatsächlich funktioniert alles, was mit JavaScript zu tun hat, nicht.

Folgendes füge ich hinzu, um ein neues Element hinzuzufügen:

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; 
}

So nenne ich diese Funktion:

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

Jetzt zeichnet sich das Bild perfekt in den Browser ein. Aber wenn ich auf das Bild klicke, bekomme ich diese Warnung nicht.

.onclicksollte auf eine Funktion anstelle einer Zeichenfolge gesetzt werden. Versuchen

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

stattdessen.

Nicht sicher, aber versuchen Sie:

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

Sie können auch ein Attribut festlegen:

elem.setAttribute("onclick","alert('blah');");

Sie können ein Ereignis nicht nach Zeichenfolge zuweisen. Verwende das:

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

Kurze Antwort: Sie möchten den Handler auf eine Funktion setzen:

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

Etwas längere Antwort: Sie müssen noch ein paar Codezeilen schreiben, damit dies in allen Browsern konsistent funktioniert.

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 eigene Probleme hat. Wenn Sie sich also nicht für die browserübergreifende Unterstützung interessieren, wählen Sie die ganz kurze. Wenn Sie sich darum kümmern und unbedingt nur diese eine Sache zum Laufen bringen möchten, wählen Sie eine Kombination aus addEventListenerund attachEvent. Wenn Sie in der Lage sein möchten, Objekte umfassend zu erstellen und Ereignis-Listener im gesamten Code hinzuzufügen und zu entfernen, und dies über alle Browser hinweg funktionieren soll, möchten Sie diese Verantwortung auf jeden Fall an eine Bibliothek wie jQuery delegieren.

Ich glaube nicht, dass du das so machen kannst. Du solltest benutzen :

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

Dokumentation hier .

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 einige Probleme verursachen (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 dies in Zukunft zu tun, sondern es macht die Dinge auch viel einfacher, wenn Sie versuchen, lokale Variablen in der Onclick-Funktion zu verwenden. Schließlich können Sie entweder addEventListener oder jQuery ausprobieren. JQuery bietet den Vorteil einer schöneren Benutzeroberfläche.

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

JQuery:

elemm.attr("onclick", "yourFunction(this)");

oder:

elemm.attr("onclick", "alert('Hi!')");

Ich kann nicht sagen warum, aber die es5 / 6-Syntax funktioniert nicht

elem.onclick = (ev) => {console.log(this);} funktioniert nicht

elem.onclick = function(ev) {console.log(this);} Arbeiten

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

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