webentwicklung-frage-antwort-db.com.de

Hinzufügen eines onclick-Ereignisses zu einem neu hinzugefügten Element in JavaScript

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

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

Wenn ich jedoch auf dieses Element klicke, wird die Warnmeldung nicht angezeigt. Tatsächlich funktioniert alles, was mit JavaScript zu tun hat, nicht.

folgendes benutze ich, 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 rufe ich diese Funktion auf:

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

Jetzt zeichnet das Bild perfekt im Browser. Aber wenn ich auf das Bild klicke, wird diese Warnung nicht angezeigt.

55
SolidSnake

.onclick sollte auf eine Funktion anstelle eines Strings gesetzt werden. Versuchen

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

stattdessen.

130
kennytm

Ich bin mir nicht sicher, aber versuche:

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

Sie können auch das Attribut festlegen:

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

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

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

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 bestimmte Problem in einer Reihe von gängigen Browsern lösen könnte, immer noch Probleme mit sich bringt. Wenn Sie sich also nicht für browserübergreifende Unterstützung interessieren, entscheiden Sie sich für die ganz kurze Variante. Wenn Ihnen das am Herzen liegt und Sie unbedingt nur diese eine Sache zum Laufen bringen möchten, wählen Sie eine Kombination aus addEventListener und attachEvent. Wenn Sie in der Lage sein möchten, umfangreich Objekte zu erstellen und Ereignis-Listener im gesamten Code hinzuzufügen und zu entfernen, und dies für alle Browser funktionieren soll, möchten Sie diese Verantwortung definitiv an eine Bibliothek wie jQuery delegieren.

2
David Hedlund

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

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

Dokumentation genau 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 Variablen onclick tatsächlich eine Funktion zuweisen, wie dies von einer anderen Person beabsichtigt wurde. Dies ist nicht nur die richtige Vorgehensweise, sondern vereinfacht auch die Verwendung lokaler Variablen in der onclick-Funktion. Schließlich können Sie entweder addEventListener oder jQuery ausprobieren. JQuery hat den Vorteil einer schöneren Oberfläche.

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

0
crazy2be

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

0
bresleveloper