Problème sur les events js

Par Heribert, il y a 8 ans

Javascript

Bonjour,

Je rencontre un problème sur mon code. En fait je ne sais pas si c'est un comportement normal, et s'il y a un moyen de le contourner.

Sur une première balise, j'ai un évenement onclick qui ajoute une autre balise. Cela fonctionne. Ensuite, un autre evenement onclick est ajouté sur cette balise, mais cela ne réagit pas.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="add"> <p id="click">click me 1</p> </div> <script src="js/JQuery.min.js"></script> <script src="js/edit.js"></script> </body> </html>

Voici mon code JS

$('#click').click(function(){ $('#add').append('<p id="click2">Click me 2</p>'); }) $('#click2').click(function(){ console.log('ok'); });

Est ce que quelqu'un aurait une explication et connaitrait un moyen de contourner le problème ? Mon application est bien plus complexe, du coup j'ai essayé ce code tout simple pour m'assurer que ce n'était pas à cause d'autre chose.

Je suis bloqué, c'est la première fois que je suis confronté à un tel problème...

Merci pour votre temps !

3 réponses

FactureHero.com, il y a 8 ans

C est tout à fait normal. Tu poses un écouteur d événement sur un objet qui n est pas encore créé au chargement de ta page (#click2). D ailleurs tu devrai avoir une erreur dans la console au chargement.

Une des solutions est de créer cet écouteur d Event DANS ta 1ere fonction, après avoir créer l objet

Essaye ça :

$('#click').click(function(){ $('#add').append('<p id="click2">Click me 2</p>');    $('#click2').click(function(){      console.log('ok');    }); })

Une autre solution existe avec le bind mais ça, ça devrait fonctionner déjà.

La logique veut que tu puisses poser un écouteur d Event sur un elmt html existant dans le dom auau moment où tu le fais.

Heribert, il y a 8 ans

Merci, ça fonctionne !

Hikiyo, il y a 8 ans

Tu peux aussi utiliser window.onload qui permettra a ton script de se lancer une fois que le dom aura été chargé.