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

.onclick doit être défini comme une fonction et non comme une chaîne de caractères. Essayer

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

au lieu de cela.

Answer 2

Vous pouvez également définir un attribut :

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

Answer 3

Je ne suis pas sûr, mais essayez :

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

Answer 4

Il n'est pas possible d'assigner un événement à une chaîne de caractères. Utilisez cela :

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

Answer 5

Réponse courte : vous voulez définir le gestionnaire comme une fonction :

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

Réponse un peu plus longue : vous devrez écrire quelques lignes de code supplémentaires pour que cela fonctionne de manière cohérente dans tous les navigateurs.

Le fait est que même le code un peu plus long qui pourrait résoudre ce problème particulier dans un ensemble de navigateurs courants continuera à poser ses propres problèmes. Par conséquent, si vous ne vous souciez pas de la compatibilité entre les navigateurs, optez pour le code le plus court. Si vous vous en souciez et que vous voulez absolument faire fonctionner cette seule chose, optez pour une combinaison de addEventListener y attachEvent . Si vous souhaitez pouvoir créer des objets de manière extensive et ajouter et supprimer des récepteurs d'événements dans votre code, et si vous voulez que cela fonctionne dans tous les navigateurs, vous devez absolument déléguer cette responsabilité à une bibliothèque telle que jQuery.