Impossible d'appeler une fonction en JS via onclick Résolu/Fermé

Question

Bonjour,

Je me retrouve confronter à un problème que je ne comprends pas. J'ai réalisé deux fonctions, dont l'une appelle l'autre via un bouton. Ces deux fonctions sont "FonctionUne" et "FonctionDeux".

Dans FonctionUne, via Jquery et par un appel d'un clic je crée une div avec des boutons dedans, dont chaque bouton a un onclick et appelle FonctionDeux.

Dans FonctionDeux, des évènements se réalisent.

Mon problème c'est que dans FonctionUne si dans le onclick de chaque bouton je mets un "alert('test')" la popup apparait, mais lorsque je mets "FonctionDeux([...])" celle-ci ne fonctionne pas.

Pour m'assurer que le problème ne vient pas du code j'appelle une alerte dans FonctionDeux. Celle-ci s'affiche si j'appelle la fonction sans passer par FonctionUne, mais via FonctionUne ça ne fonctionne pas...

En résumé : FonctionDeux ne fonctionne pas lorsque je l'appelle via un onclick d'un bouton depuis la div créée par FonctionUne.

Le code schématique (mais je ne pense pas que ça aidera) :

function FonctionUne(param1)
 {
$('#corps').prepend('<div id="Jesuisunediv"><button type="button" class="bouton" onclick="FonctionDeux(\'param1\',\'param2\',\'param3\')">Blabla</button></div>');
}

function FonctionDeux(param1,param2,param3)
{
alert('Coucou ça fonctionne');
}

Merci d'avance.

'); } function FonctionDeux(param1,param2,param3) { alert('Coucou ça fonctionne'); } Merci d'avance.

Pitet · Answer

Salut,

C'est le comportement normal de javascript : les événements (onclick...) sont initialisés au chargement de ta page uniquement pour les éléments déjà présent dans ta page et ne fonctionneront pas pour les nouveaux éléments ajoutés via javascript après le chargement de la page.

Puisque tu utilises jQuery, une solution simple pour faire fonctionner l'événement onclick sur les nouveaux éléments créés par FonctionUne est d'utiliser la fonction jQuery.on() : https://api.jquery.com/on/
Pour cela, tu peux par exemple ajouter une classe "boutonFonction2" et attacher l'évènement onclick avec la fonction on() sur cette classe :

function FonctionUne(param1)
 {
$('#corps').prepend('<div id="Jesuisunediv"><button type="button" class="bouton boutonFonction2">Blabla</button></div>');
}

function FonctionDeux(param1,param2,param3)
{
alert('Coucou ça fonctionne');
}

$('body').on('click', '.boutonFonction2', FonctionDeux);

Bonne journée

'); } function FonctionDeux(param1,param2,param3) { alert('Coucou ça fonctionne'); } $('body').on('click', '.boutonFonction2', FonctionDeux); Bonne journée

Gzum · Answer

Je viens d'essayer ta méthode et ma FonctionDeux se lançait sans écouter l'événement click. Il manquait juste une variable anonyme pour la fin.

Sinon merci beaucoup pour ton aide je ne savais vraiment pas quoi faire. Maintenant je saurai que le onclick ne fonctionne qu'avec la création de la page.

Bonne fin de journée.

Impossible d'appeler une fonction en JS via onclick

2 réponses

Discussions similaires