Problème avec JQUERY [Résolu]

dalma · 25/03/2011, 11h44

Bonjour,

J'ai un petit problème de compréhension avec JQUERY, je précise que je débute à peine. Pour l'instant je cherche à comprendre.
Mon besoin : créer un menu dynamique en JQUERY.

Un petit bout de code suivi d'explications :

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
23
24
25
26
27
28
29
30
31
 
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Ajax test</title>
		<link rel="stylesheet" href="" type="text/css" media="screen" />
		<script type="text/javascript" src="./js/jquery/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$.post("./php/test.php", {}, function(data) {
					$("#left").append(data);
					return false;
				});
				$("#left a").click(function() {
					alert($(this).attr("rel"));
				});
			});
		</script>
	</head>
	<body>
		<h1>Test AJAX</h1>
		<div id="left">
			<ul>
				<li>
					<a href="#" rel="test1">Test 1</a>
				</li>
			</ul>
		</div>
		<div id="right"></div>
	</body>
</html>

Au chargement de la page, j'appelle test.php qui me ramène par exemple :

Code :

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

1
2
 
<ul><li><a href="#" rel="test2">Test 2</a></li></ul>

J'ai donc 2 liens Test 1 (en dur dans le code) et Test 2 (généré via JQUERY).

Ce que je ne comprends pas c'est pourquoi dans un cas (Test 1), la fonction click affiche bien la popup "alert" et que dans l'autre (Test 2), cela ne fonctionne pas. J'ai essayé pas mal de choses mais sans succès...
Quelqu'un aurait-il l'explication/correction ?

J'en profite pour une autre demande : à quoi servent les return false que je vois régulièrement à l'intérieur des fonctions JQUERY ? Quel est leur intérêt ?

Merci d'avance.

Bovino · 25/03/2011, 11h55

Ca n'a rien à voir avec jQuery.
C'est juste que quand tu appelles

Code :

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

1
2
3
$("#left a").click(function() {
	alert($(this).attr("rel"));
});

test2 n'existe pas. Donc JavaScript n'a aucune raison d'attribuer le comportement à test2...

En revanche, jQuery peut pallier à ça avec live().

dalma · 25/03/2011, 13h12

Merci bien, c'est bien ça...
Ca peut en intéresser donc la solution :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Ajax</title>
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<link rel="stylesheet" href="" type="text/css" media="screen" />
		<script type="text/javascript" src="./js/jquery/jquery.min.js"></script>
		<script type="text/javascript" src="./js/jquery/jquery.tools.min.js"></script>
		<script type="text/javascript" src="./js/jquery/jquery.core.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$.post("./php/test.php", {}, function(data) {
					$("#left").append(data);
					return false;
				});
			});
			$(function(){
				$("#left a").live('click', function() {
					alert($(this).attr("rel"));
					return false;
			    });
			})
		</script>
	</head>
	<body>
		<h1>Test AJAX</h1>
		<div id="left">
			<ul>
				<li>
					<a href="#" rel="test1">Test 1</a>
				</li>
			</ul>
		</div>
	</body>
</html>

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email