[AJAX] avec JQUERY

Version imprimable

[AJAX] avec JQUERY

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:

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:

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.

25/03/2011, 11h55
Bovino
Ca n'a rien à voir avec jQuery.
C'est juste que quand tu appelles
Code:

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

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

Code:

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>