[jQuery] HTML Insérer avec append() inaccessible

inaccessible au clique

Sujet résolu

27 mai 2017 à 19:05:47

Bonjour à toutes et tous

Me voilà face à un problème inattendu.

J’ai crée une jolie interface en vue d’être dynamique, il y a des boutons qui permettent d’ajouter des éléments HTML dans ma page.

Cela fonctionne bien sauf que… à ma grande surprise ces éléments sont inaccessibles au clic de souris.

J’ai donc créé un petit script pour tester ( simple ajout de liens <a>) et effectivement je ne peu cliquer sur les éléments ajouté dans le DOM.

Si je les ajoute directement dans le document.ready() alors c’est ok. Par contre via un ajout par clic que un bouton mon éléments est injecté mais ignoré aux événements (clic)

Je vous donne tout les éléments pour bien comprendre

Code HTML simple :

<!DOCTYPE html>
<html lang="fr">
<head>		
    <title>test</title>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="css/style.css" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
</head>
<body>

<div id="zone"> 
  <p><a class="link">lien numéro 1 </a></p>
</div>

<p>
  <button id="add">Ajouter lien</button>
</p>

  <script src="libs/jquery-3.0.0.js"></script>
  <script src="js/create.js"></script>
</body>
</html>

Mon Javascript :

$(document).ready(function(){
 
	// Ajoute un lien au chargement de la page
	var insert_cat  = '<p><a class="link">lien numéro 2 </a></p>';			 
	$('#zone').append(insert_cat);
	
	// détection d'un clic sur un lien de classe .link
	 $(".link").on('click', function(){
	    console.log("clic");
	});
     
	 // Ajoute un lien au clic sur boutton ADD
	 $("#add").on('click', function(){
		var ajouter  = '<p><a class="link">lien numéro x </a></p>';			 
		$('#zone').append(ajouter);
	});
	
}); // fin onload

Résultat page web : un lien (x) à bien été ajouter dans ma div

Inspecteur d’éléments :

Donc je répète:

- Le lien 1 présent en dur dans le code HTML est accessible au clic (normal)

- Le lien 2 injecté sans condition est accessible au clic lui aussi

- Le lien X injecté après le clique sur le bouton "ajouter" est présent mais comme ignoré, il n' est pas accessible au clic

Pourtant le JavaScript est aussi fait pour cela, injecter et cibler ces nouveaux éléments non ?

Si quelqu’un peut m’expliquer le principe ou le pourquoi du comment je lui en serait très reconnaissante

-
Edité par pipelette13 27 mai 2017 à 19:15:32

Stéphanie, blonde mais je me débrouille (....?) ** Mon sondage: mode Dark VS mode Clean

ninjavascript

28 mai 2017 à 1:07:33

Hello.

Ce comportement est tout à fait normal. Explications :

Lorsque ton code est exécuté au chargement de la page, jQuery va donc lire la ligne suivante ... :

$(".link").on('click', function() {...} );

... et à ce moment là, il va aller chercher les <p class=""link"> qu'il trouve à cet instant dans le DOM, c'est à dire celui dans la <div id="zone"> et celui que tu as créé juste avant : insert_cat.

Tous les <p class=""link"> que tu ajoutera dynamiquement après avoir attaché cet événement clic sur les .link seront ignorés, car ces nouveaux éléments n'auront, eux, aucun événement attaché.

La solution pour palier à cela est d'attacher ton événement click sur l'élément parent #zone, et de récupérer l'élément .link enfant qui a déclenché ce clic :

// détection d'un clic sur un lien de classe .link
$("#zone").on("click", ".link", function(){
    console.log("clic");
});

Cette syntaxe fait appel au paramètre selector de la méthode .on() de jQuery : http://api.jquery.com/on/#on-events-selector-data-handler

Essaye comme ça, tu verras que cela devrait fonctionner.

-
Edité par ninjavascript 28 mai 2017 à 1:12:54

pipelette13

28 mai 2017 à 1:31:14

Bonsoir jmpp,

Je venais voir s'il y avait une réponse avant d'aller au dodo et je tombe sur un nocturne

Déjà merci pour ta réponse. Je me doutais bien du comportement et mon message était plus une bouteille à la mer, vu que je pensais que ce n'était pas possible avec mon organisation.

j'ai même essayée de mettre mes fonction en dehors du document.ready() pensant pouvoir les atteindre une fois le DOM chargé et modifié, sans résultat évidemment...

pour l'API Selector je connais juste les querySelector et All() , je ne savais qu'il y avait d'autre méthodes liées.

je pense avoir comprise ton explication. je vais relire, consulter la doc que tu m'a donné et tester.

Par contre je ne pourrai pas te donner réponse avant demain soir ou Lundi (demain absente c'est dimanche ). Mais ton intervention me redonne espoirs.

En attendant je te remercie encore et te souhaite un bon Dimanche

Stéphanie, blonde mais je me débrouille (....?) ** Mon sondage: mode Dark VS mode Clean

ninjavascript

28 mai 2017 à 2:17:42

Je t'en prie, n'hésite pas si tu rencontres d'autres soucis.

Bonne fin de week-end

pipelette13

30 mai 2017 à 0:20:21

Bonsoir jmpp

Effectivement cela fonctionne bien.

j'ai bien comprise cette notion d'attachement au parent une fois l'insertion de nouveaux éléments après que le DOM soit chargé.

Cela va m'être utile pour la suite et cela peut sans doute expliquer certains comportements antérieurs à mes événements. Donc rien à voir avec la phase de bouillonnement (je pensais à ça aussi)

Après cette page de test, demain je vais créer mon script finale sur mon mini-projet. Si souci je reviens demander conseils.

Merci encore à toi pour ton aide et ton explication claire et détaillée

Stéphanie, blonde mais je me débrouille (....?) ** Mon sondage: mode Dark VS mode Clean

ninjavascript

30 mai 2017 à 9:47:34

Hello.

Je t'en prie. Tant mieux si tu as compris, c'est l'essentiel.

N'hésite pas Bonne journée.

YannDeo

16 août 2017 à 19:10:30

Salut jmpp désolé d'intervenir sur ce post; mais tu as lair de t'y connais en jQuery et ajax.Besoin de votre aide.Voila la problématique .

-Jai un tableau contenant une liste de produit k je voudrais ajouté en session a click. d'une image (icon-plus ).

Etape1- .clik sur l'icon-plus , je voudrai que l'aspect de limage change(icon-croix) pour avoir un rendu visuellement intéressant.Mais aussi que la classe et l'id de l'icon cliqué change

Etape2- récupérer la liste des id correspondant au icon-croix (c'est a dire ceux sur quoi on clique) dans un tableau.

Etape3- Et renvoyer ce tableau[id1,id12,id46..] au un controller qui s'occupe d'enregistrer chaque produit(id) en session.

le soucis étant quand je change l'aspect de l'icon au click et que je lui attribut une nouvelle class="panOff .Je n'arrive pas accéder dans le mon script a cette nouvelle classe. De plus je bloque aussi sur les étapes 2 et 3 .