Ajouter de l'événement onclick nouvellement ajout d'un élément en JavaScript
J'ai essayé d'ajouter l'événement onclick de nouveaux éléments, j'ai ajouté avec JavaScript.
Le problème est quand j'ai vérifier le document.corps.innerHTML je peux effectivement voir la onclick=alert('bla') est ajouté à l'élément nouveau.
Mais quand je clique sur cet élément, je ne vois pas la boîte d'alerte est de travail. 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 attire parfaitement l'intérieur du navigateur. Mais lorsque je clique sur l'image, je ne reçois pas d'alerte.
- Oh la beauté de jQuery. Peut-être que ce sera utile à l'avenir 🙂 $('.rvml').live('click', function() { alert(1); });
Vous devez vous connecter pour publier un commentaire.
.onclick
doit être réglé à une fonction au lieu d'une chaîne. Essayezà la place.
Pas sûr, mais essayez :
.addEventListener
le 2ème argument doit encore être une fonction et non une chaîne.Vous pouvez également définir l'attribut:
vous ne pouvez pas affecter un événement par chaîne. Utiliser:
Réponse courte: vous souhaitez définir le gestionnaire d'une fonction:
Légèrement plus longue réponse: vous aurez à écrire quelques lignes de code pour obtenir que cela fonctionne de manière cohérente sur tous les navigateurs.
Le fait est que même le peu-plus-code qui pourrait résoudre ce problème en particulier à travers un ensemble de communes, les navigateurs continuent à venir avec ses propres problèmes. Donc, si vous n'avez pas de soins sur la prise en charge du navigateur, aller avec le totalement court. Si vous vous souciez d'elle et de tout ce que voulez pour obtenir ce une seule chose à travailler, aller avec une combinaison de
addEventListener
etattachEvent
. Si vous voulez être en mesure de beaucoup de créer des objets et les ajouter et supprimer des écouteurs d'événements tout au long de votre code, et que vous voulez que cela fonctionne sur tous les navigateurs, vous voulez certainement à déléguer cette responsabilité à une librairie comme jQuery.Je ne pense pas que vous pouvez le faire de cette façon. Vous devez utiliser :
Documentation ici.
Vous avez trois problèmes différents. Tout d'abord, les valeurs des balises HTML qui devrait être cité! Ne pas le faire peut confondre le navigateur, et peut causer quelques problèmes (bien qu'il n'est probablement pas le cas ici). Deuxièmement, vous devez attribuer une fonction à la onclick variable, comme quelqu'un d'autre meantioned. Non seulement est-ce la bonne façon de le faire aller de l'avant, mais cela rend les choses beaucoup plus simple si vous essayez d'utiliser des variables locales à la fonction onclick. Enfin, vous pouvez essayer la méthode addEventListener ou jQuery, jQuery a l'avantage d'une interface plus conviviale.
Oh, et assurez-vous que votre code HTML valide! Qui pourrait être un problème.
ne peux pas dire pourquoi, mais l'es5/6 la syntaxe ne fonctionne pas
elem.onclick = (ev) => {console.log(this);}
pas de travailelem.onclick = function(ev) {console.log(this);}
de travailJQuery:
ou:
elem
contenir?Dans le cas où vous ne souhaitez pas écrire tout le code que vous avez une fois écrit dans la fonction que vous avez appelé. Veuillez utiliser le code suivant, à l'aide de jQuery: