Après chargement avec $.ajax()

**anto2b** · 28/09/2012, 18h28

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 :

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
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 :

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

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

**Bovino** · 28/09/2012, 18h37

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

**anto2b** · 28/09/2012, 18h40

Je fais donc ceci ?

Code :

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

$('#test').on("click", function(event){alert(TEST REUSSI');});

**Bovino** · 28/09/2012, 18h48

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

**anto2b** · 28/09/2012, 18h53

Envoyé par Bovino

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

Code :

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

1
2
3
function notify() { alert("TEST REUSSI"); }
 
$("#test").on("click", notify);

Je pense que cela devrait être bon ?

**Bovino** · 28/09/2012, 19h07

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

**anto2b** · 28/09/2012, 19h23

Je suis passer par live()

Code :

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

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

**Bovino** · 28/09/2012, 21h07

.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 :

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

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

Après chargement avec $.ajax()

jQuery

Discussions similaires

Partager

Partager