Ajouter un événement onclick à l'élément nouvellement ajouté en JavaScript

Question

J'ai essayé d'ajouter un événement onclick aux nouveaux éléments que j'ai ajoutés avec JavaScript.

Le problème, c'est que lorsque je vérifie document.body.innerHTML, je peux voir que l'élément onclick=alert('blah') est ajouté au nouvel élément.

Mais lorsque je clique sur cet élément, je ne vois pas que la boîte d'alerte fonctionne. En fait, tout ce qui est lié à JavaScript ne fonctionne pas

Voici ce que j'utilise pour ajouter un nouvel élément :

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

Voici comment j'appelle cette fonction :

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

L'image est maintenant parfaitement dessinée dans le navigateur. Mais lorsque je clique sur l'image, je n'obtiens pas cette alerte.

Answer 1

Je ne pense pas que vous puissiez le faire de cette manière. Vous devez utiliser :

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

Documentation ici .

Answer 2

Je ne sais pas pourquoi, mais la syntaxe es5/6 ne fonctionne pas.

elem.onclick = (ev) => {console.log(this);} ne fonctionne pas

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

Answer 3

Vous avez trois problèmes différents. Tout d'abord, les valeurs contenues dans les balises HTML doivent être mises entre guillemets ! Ne pas le faire peut perturber le navigateur et causer des problèmes (bien que ce ne soit probablement pas le cas ici). Deuxièmement, vous devriez en fait assigner une fonction à la variable onclick, comme quelqu'un d'autre l'a mentionné. Non seulement c'est la bonne façon de procéder à l'avenir, mais cela simplifie grandement les choses si vous essayez d'utiliser des variables locales dans la fonction onclick. Enfin, vous pouvez essayer addEventListener ou jQuery, jQuery ayant l'avantage d'avoir une interface plus agréable.

Oh, et assurez-vous que votre code HTML est valide ! Cela pourrait être un problème.

Answer 4

JQuery :

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

ou :

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

Answer 5

Si vous ne voulez pas écrire tout le code que vous avez déjà écrit dans la fonction que vous avez appelée. Veuillez utiliser le code suivant, en utilisant jQuery :

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