web-dev-qa-db-fra.com

Ajout d'un événement onclick au nouvel élément ajouté en JavaScript

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

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

Mais lorsque je clique sur cet élément, je ne vois pas que la zone 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>

Maintenant, l'image est parfaitement dessinée dans le navigateur. Mais lorsque je clique sur l'image, je ne reçois pas cette alerte.

javascripteventsnew-operatorelementadd
55
SolidSnake

.onclick devrait être défini sur une fonction plutôt que sur une chaîne. Essayer

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

au lieu.

130
kennytm

Pas sûr mais essayez:

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

Vous pouvez également définir l'attribut:

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

vous ne pouvez pas affecter un événement par chaîne. Utiliser ça:

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

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

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

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

Le fait est que même le code légèrement plus long qui pourrait résoudre ce problème particulier sur un ensemble de navigateurs courants présentera toujours des problèmes qui lui sont propres. Donc, si vous ne vous souciez pas de la prise en charge multi-navigateurs, optez pour la solution totalement courte. Si vous y tenez et que vous voulez absolument que cette seule chose fonctionne, utilisez une combinaison de addEventListener et de attachEvent. Si vous voulez pouvoir créer de manière extensive des objets, ajouter et supprimer des écouteurs d'événements dans votre code et que cela fonctionne avec tous les navigateurs, vous voulez certainement déléguer cette responsabilité à une bibliothèque telle que jQuery.

2
David Hedlund

Je ne pense pas que vous puissiez le faire de cette façon. Tu devrais utiliser :

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

Documentation ici même .

2
Guillaume Lebourgeois

Vous avez trois problèmes différents. Tout d'abord, les valeurs dans les balises HTML doivent être citées! Ne pas le faire peut dérouter 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 le voulait quelqu'un d'autre. Non seulement c'est la bonne façon de procéder, 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 a l'avantage d'une interface plus agréable.

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

0
crazy2be

ne peux pas dire 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

0
bresleveloper