Mettre un événement click sur un élément ajouté

Version imprimable

19/11/2019, 22h57
Bun444

Mettre un événement click sur un élément ajouté

bonjour tout le monde,
J'ai un souci de bonne pratique...
explication
dans ma page j'ai <div id="a">clic pour ajouter c</div> <div id="b"></div>.
Jusque là, ça va.
Ensuite, si je fais un

Code:

$('#a').onclick(function(){$('#b').html('<div id="c">click pour voir</div>')})

Jusque là tout fonctionne mais si j'ajoute à ma page

Code:

$('#c).onclick(function(){alert('ca marche')})

Ben là ça ne fonctionne pas...
Je ne comprends pas vraiment pourquoi.
Quelqu'un à une idée ?
19/11/2019, 23h16
Obsidian

Bonjour et bienvenue,

Je n'utilise jamais JQuery à titre personnel, mais il me semble que dans ce contexte, c'est .click() et pas .onclick() qu'il faut utiliser.
En outre, il manque ici une apostrophe fermante après #c mais je suppose qu'il s'agit d'une faute de frappe dans le forum et pas dans ton code.

Bon courage.
19/11/2019, 23h41
Bun444

C’est ça. Il est un peu tard et j’ai fais le message un peu vite fait. Il s’agit de fautes de frappes, j’ai essayé en js pur document.getElmentbyid... et là c’es Click alors je me suis embrouillé mais mon code est bon. Ce qui est bizarre c’e Que je peux récupérer le val() d’un input ajouté mais pas l’event Click par exemple. Si j’ajoute onclick dans la balise, le code s’execute mais si j’appelle une fonction précédemment crée il me dit que cz n’est pas une fonction???
Bon, je ne suis peut-être plus très clair à presque minuit apres 4:00 de dev plus ma journée de boulot...
20/11/2019, 09h26
SpaceFrog
L'élément n'existant pas au chargement de la page lors de l'attribution par script des events, il faut attribuer l'event à partir d'un parent qui lui existe:
Code:

1 2 3 <div id="a"> </div>
attribution de l'event alors que l'id c n'existe pas encore
Code:

1 2 $('#a').on("click", "#c", function(){ alert('ca marche') });
creation de l'element #c après avoir attribué l'event à partir du parent

Code:

$("#a").append( $('<div id="c">click pour voir</div>') );

sinon regarde du coté de .delegate()

Cela en javascript fonctionne aussi.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<body>
	<div id="a">clic pour ajouter c</div>
	<p></p>
	<script type="text/javascript">
        var ajouter=document.getElementById('a');
        var alerter=document.querySelector('p');
        ajouter.addEventListener('click',ajout);
        function ajout(){alerter.innerHTML='<p>click pour alerter</p>';};
        alerter.addEventListener('click',ajout2);
        function ajout2(){alert('ca marche');};
        </script>
</body>

20/11/2019, 11h19
SpaceFrog

En attribuant l'event après la création de l'objet ... :aie: forcément ...
20/11/2019, 12h46
Bun444

Merci.
20/11/2019, 17h11
Bun444

Nickel, je valide

Code:

$('#a').on("click", "#c", function(){ alert('ca marche') });

Je pensais bien que c'était un truc du genre mais ce qui est étrange c'est que l'on puisse récupérer le .val() d'un élément ajouté sans passer par son parent.
Merci le retraité ;)
P.S : Je préfère ça que l'autre solution :mouarf:
20/11/2019, 17h25
SpaceFrog

Non ce n'est pas étrange il a un value d'office ...
Mais il n'a pas d'événement click attribué d'office, donc si tu ne lui attribue pas ...