Interpréter le HTML ajouté avec jQuery

Version imprimable

Bonjour,

Je rencontre quelques souci avec le HTML ajouté avec jQuery après une action.
Le HTML ajouté n'est pas interprété par jQuery.

Un exemple concret :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <html > <head> <title>Essai</title> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#ajoutAlert").click(function () { $('<a id="alertMessage" href="#">Alert message</a>').appendTo("#alert"); }); $("#alertMessage").click(function () { alert("gangé"); }); }); </script> </head> <body> <div id="alert"></div> <a href="#" id="ajoutAlert">Ajout alert</a> </body> </html>
Quand je clique sur "Ajout alert", jQuery m'ajoute bien dans la DIV "alert" le lien HREF "Alert message".
En revanche une fois celui ci ajouté si je clique sur ce lien, le navigateur n'effectuera pas l'action définit sur ce lien.

Pour palier le problème, il m'arrive de réinclure le framework jQuery.
En revanche dans des pages plus complexe avec Ajax, il met impossible de réinclure X fois le .js

Comment faite vous ?

Merci pour vos réponses.

Romain

09/11/2010, 08h06
Bovino

C'est normal, au moment où

Code:

$("#alertMessage").click(function ()

est interprété, alertMessage n'existe pas dans la page... c'est après l'insertion qu'il faut définir le comprtement.
09/11/2010, 09h47
llaffont

En clair ce que veut dire Bovino tes balises <script type="text/javascript"></script> sont comme de professeur et les balise HTML sont les élèves
Quand tu charge la page le professeur donne les directives sur les devoir à faire aux élèves présents.
Quand un élève arrive en retard il ne sait pas quoi faire. Il faut que le professeur répète les directives.

Concrètement quand tu crées un nouvel élément il faut lui redonner sont activité
09/11/2010, 14h24
borower
Merci pour vos réponse Bovino et llaffont.
L'exemple du professeur et de ces élèves est plus bien.
Je vais continuer avec cette exemple.

Est t'il possible de changer de professeur à l'arrivé d'un nouveau élève ?

Car si je met mon action dans la fonction qui me génère le lien :
Code:

1 2 3 4 5 6 7 8 $("#ajoutAlert").click(function () { $('<a id="alertMessage" href="#">Alert message</a>').appendTo("#alert"); $("#alertMessage").click(function () { alert("gangé"); }); });
Si je clique une première fois sur "#ajoutAlert", j'aurai bien une alerte javascript.
En revanche si je clique une 2ème fois sur "#ajoutAlert" j'ai donc deux liens.
Le clique sur le deuxième lien n'est pas fonctionnel, par contre un clique sur le premier m'affichera deux alertes javascript.

J'espère avoir été compréhensif.
Merci de votre aide en tout cas.

Romain

Ceci devrait te convenir :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
		<script>
		$(document).ready(function() {
			$("#ajoutAlert").click(function () { 
				var index = $(".a_message").length;
				$('<a class="a_message" id="alertMessage_'+index+'" href="#">Alert message</a>').appendTo("#alert");
 
				$("#alertMessage_"+index).click(function () { 
					alert("gangé");
				});
			});
		});
		</script>
	</head>
	<body>
		<div id="alert"></div>
		<a href="#" id="ajoutAlert">Ajout alert</a>
	</body>
</html>

11/11/2010, 15h13
borower

Merci beaucoup scourjean pour ta réponse.
Cela marche nickel.

Je ne sais pas trop comment on fait pour marquer le post comme résolu ?!
En tout cas merci de votre aide.

Romain
11/11/2010, 15h58
Bovino

Citation:

Envoyé par borower

Je ne sais pas trop comment on fait pour marquer le post comme résolu ?!

Le bouton :resolu: en dessous de la discussion