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

**Bun444** · 19/11/2019, 22h57

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Ben là ça ne fonctionne pas...
Je ne comprends pas vraiment pourquoi.
Quelqu'un à une idée ?

**Obsidian** · 19/11/2019, 23h16

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.

**Bun444** · 19/11/2019, 23h41

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...

**SpaceFrog** · 20/11/2019, 09h26

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="a">
 
</div>

attribution de l'event alors que l'id c n'existe pas encore

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

sinon regarde du coté de .delegate()

**Philcmoi** · 20/11/2019, 11h09

Cela en javascript fonctionne aussi.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**SpaceFrog** · 20/11/2019, 11h19

En attribuant l'event après la création de l'objet ...

forcément ...

**Bun444** · 20/11/2019, 12h46

Merci.

**Bun444** · 20/11/2019, 17h11

Nickel, je valide

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#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

**SpaceFrog** · 20/11/2019, 17h25

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 ...

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

jQuery

Discussions similaires

Partager

Partager