Interpréter le HTML ajouté avec jQuery

**borower** · 08/11/2010, 23h56

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 :

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

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

**Bovino** · 09/11/2010, 08h06

C'est normal, au moment où

Code :

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

$("#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.

**llaffont** · 09/11/2010, 09h47

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é

**borower** · 09/11/2010, 14h24

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 :

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

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

**scourjean** · 09/11/2010, 15h09

Ceci devrait te convenir :

Code :

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

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>

**borower** · 11/11/2010, 15h13

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