Après chargement avec $.ajax()

Version imprimable

Bonjour,

Je charge du contenu dynamique dans la div ayant pour id #notification avec la fonction $.ajax lors du clique sur un des 3 bouttons ayant pour class plop

Le contenu chargé c'est un bouton ayant pour id #test.. Mais lorsque je clique sur celui-ci l'action ne se fait pas (dans ce cas afficher une alert()).
J'aimerais savoir d'où vient mon problème ?

Merci de votre aide.

Voici mon code :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 
  <script>
 
  // JavaScript Document
 
  $(document).ready(function() {
 
   $('.plop').click( 
 
			function(){
 
				var id = $(this).val();
				var dataString = 'id='+id;			  
			    $.ajax({
						   type: "POST",
						   url: "action.php",
						   data: dataString,
 
						   success: function(msg){
							   		$('#notification').html(msg);
									},
 
 
						   error:  function(){
							   		alert("Erreur, veuillez recommencer");
							   		}
 
					  }); 
 
				}
);
 
 
    $('#test').click(  function(){alert('TEST REUSSI');});
 
  });
 
</script>
</head>
 
<body>
<button class="plop" value="10">10</button>
<button class="plop" value="15">15</button>
<button class="plop" value="20">20</button>
</tr></table>
<br /><br /><br />
<div id="notification">Ici</div>
</body>
</html>

et mon script action.php qui contient ce qui va être charger dans la div #notification :

Code:

1
2
3
4
5
6
 
<?php
 
echo '<button id="test">'.$_POST['id'].'</button>';
 
?>

28/09/2012, 18h37
Bovino

C'est normal... au moment de la déclaration de l'événement, l'élément n'existe pas.
Il faut regarder du coté de la délégation d'événement à l'aide de .on().
28/09/2012, 18h40
anto2b

Je fais donc ceci ?

Code:

$('#test').on("click", function(event){alert(TEST REUSSI');});
28/09/2012, 18h48
Bovino

Non... tu n'as pas lu la partie sur la délégation d'événement !
28/09/2012, 18h53
anto2b
Citation:

Envoyé par Bovino

Non... tu n'as pas lu la partie sur la délégation d'événement !
Code:

1 2 3 function notify() { alert("TEST REUSSI"); } $("#test").on("click", notify);
Je pense que cela devrait être bon ?
28/09/2012, 19h07
Bovino

:nono:

$("#test") n'existe pas plus que dans ton premier exemple ! Ce n'est donc pas sur lui qu'il faut poser l'événement, ce qui est le principe de la délégation d'événement, comme indiqué dans la doc de .on().

Lis bien la partie "Direct and delegated events" !

Je suis passer par live()

Code:

1
2
function notify() { alert("clicked"); }
$("#test").live("click", notify);

28/09/2012, 21h07
Bovino

:no:

.live() est déconseillé et déprécié... J'ai pourtant essayé de tout faire pour que tu puisses trouver toi-même la bonne solution...

Code:

$('#notification').on('click', '#test', notify)

Ainsi, tu poses le gestionnaire sur le plus proche ancêtre connu ($('#notification')) auquel tu demandes, lorsque l'événement lui parvient, de vérifier si l'élément qui a déclenché l'événement est de type '#test' et si c'est le cas, la fonction notify est lancée.