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

77

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.

SolidSnake
quelle
1
Oh, die Schönheit von jQuery. Vielleicht ist dies in Zukunft hilfreich :) $ ('. Rvml'). Live ('click', function () {alert (1);});
Daniel Sloof

Antworten:

159

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

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

stattdessen.

kennytm
quelle
24

Nicht sicher, aber versuchen Sie:

elemm.addEventListener('click', function(){ alert('blah');}, false);
Boris Delormas
quelle
Auch mit .addEventListenerdem 2. Argument muss noch eine Funktion keine Zeichenfolge sein.
Kennytm
Mit jQuery habe ich mich nicht daran erinnert;) Danke
Boris Delormas
15

Sie können auch ein Attribut festlegen:

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

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

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

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.

David Hedlund
quelle
1
Ich brauche das nur für den Internet Explorer. Der kurze funktioniert wie Charme.
Vielen
2

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 .

Guillaume Lebourgeois
quelle
0

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.

crazy2be
quelle
Ich benutze dies lokal. Es wird also kein Problem für mich sein. Über jQuery hat es mir nicht gefallen, weil ich nicht die Kontrolle über alles übernehmen kann und es nur chaotisch mit vielen Codes ist und sich auf andere Javascript-Bibliotheken auswirkt. Ich würde lieber meine eigene Bibliothek erstellen, als meine Zeit damit zu verschwenden, herauszufinden, wie man jQuery verwendet.
Vielen
0

JQuery:

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

oder:

elemm.attr("onclick", "alert('Hi!')");
Alex
quelle
Dieser Code sollte Sie laut warnen. Können Sie auch eine Erklärung hinzufügen, damit andere daraus lernen können? Was elementhält?
Nico Haase
Und wenn Sie die am besten bewertete Antwort gelesen haben, hätten Sie auch Code mit einer anonymen Funktion geschrieben, um genau dieses Problem zu vermeiden
Nico Haase
0

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

Bresleveloper
quelle
-2

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

Prateek
quelle