Attacher fonction après chargement du bouton

Invité · 19/01/2012, 12h19

Bonjour,

J'ai une page index.php avec un div id="contenu" et un bouton avec id="ok" et une page accueil.php avec un bouton id="test".

Quand je clique sur Ok, la page accueil.php est chargée dans le div id="contenu" mais si je clique sur mon bouton id="test", rien ne se passe.

D'après ce que j'ai compris dans la FAQ, mon code se déclenche une fois la page chargée et attache à mon bouton id="ok", un événement Onclick.

Aussi, j'ai ajouté après le chargement de ma page accueil.php, l'attachement d'un événement Onclick sur mon bouton id="test".

Voici le code de mon fichier JS.

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
 
 
$(document).ready(function(){
 
	$('#ok').click(function() {		
 
		$.ajax({
 
			success : function(){				
				$('#contenu').load("commun/accueil.php");
 
		$('#test').click(function() {
		alert('Test ok');		
		return false;
	});
 
			},
 
		});
 
		return false;
	});
 
});

Après recherche, je suis tombé sur des posts traitant de l'évaluation de scripts JS mais je ne sais pas si mon problème vient de là car en testant, rien ne change.

Pouvez-vous m'aider ?

Merci

**Rachel** · 19/01/2012, 13h06

bonjour

.
pourquoi ne fait tu pas ceci :

Code :

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

1
2
3
4
5
6
7
8
$(document).ready(function(){
 $('#ok').click(function() {	
// code
 });
	$('#test').click(function() {	
// code
 });
});

Invité · 19/01/2012, 13h26

Merci pour ta réponse.

J'ai testé ton code mais il semble qu'il manque des parenthèses.
Après modification, le test n'est pas concluant car la page accueil.php ne se charge plus.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
$(document).ready(function(){
 
	$('#ok').click(function() {	
		$('#contenu').load("commun/accueil.php");
	});
 
	$('#test').click(function() {	
		alert('Test ok');
	});
 
});

**Rachel** · 19/01/2012, 14h06

essaye ceci :

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
 
 
$(document).ready(function(){
 
	$('#ok').click(function() {		
 
		$.ajax({
			success : function(){				
				$('#contenu').load("commun/accueil.php"); 
			},
		});
		return false;
	});
		$('#test').click(function() {
		alert('Test ok');		
		return false;
	});
 
});

**Bovino** · 19/01/2012, 14h15

Utilise la délégation d'événements : .delegate() ou .on().

Invité · 19/01/2012, 14h34

@rotrevrep
Après vérification, ton premier code est bon pour l'affichage de la page accueil.php mais rien ne se passe sur le clic du bouton id="Test".

@Bovino
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
 
$(document).ready(function(){
 
	$('#ok').click(function() {	
		$('#contenu').load("commun/accueil.php");
	});
 
	 $('#contenu').delegate($("test"), "click", function(){
		alert('Test ok');
	});	
 
});

- Clic de Ok alors chargement de la page puis affichage de 'Test ok'
- Clic de Test alors affichage de 'Test ok'

Le bouton Test fonctionne mais je dois avoir mal compris l'utilisation de delagate car au final le script affiche deux fois 'Test ok'.

Merci

**Rachel** · 19/01/2012, 16h50

si je ne me trompe pas, tu devrais faire ceci :

Code :

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

1
2
3
$('#test').delegate($(this), "click", function(){
		alert('Test ok');
	});

Invité · 19/01/2012, 17h11

Je viens de tester mais rien ne se passe sur le clic du bouton Test.

Merci pour ton aide.

**Rachel** · 19/01/2012, 17h38

Envoyé par AdoOs

Je viens de tester mais rien ne se passe sur le clic du bouton Test.

Merci pour ton aide.

pourtant je viens de tester le code, cela fonctionne chez moi

Invité · 19/01/2012, 18h05

Je viens de tester de nouveau mais sans succès.

Index.php

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
<!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" >
 
	<link rel="stylesheet" href="style.css" type="text/css" />
 
	<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
 
	<script>
 
	$(document).ready(function(){
 
		$('#ok').click(function() {	
			$('#contenu').load("commun/accueil.php");
		});
 
		$('#test').delegate($(this), "click", function(){
				alert('Test ok');
		});
 
	});	
 
	</script>  
 
</head>
 
<body>
 
	<div id='contenu'></div>		
 
	<input type="button" id="ok" name="inclure" value="Bouton Inclure" />
 
</body>
 
</html>

Accueil.php

Code :

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

<input type="button" id="test" name="tester" value="Bouton Test" />

- Clic sur Bouton Inclure : La page "Accueil.php" est bien chargée dans le div "contenu"
- Clic sur Bouton Test : Rien ne se passe

Il y a surement une chose que je ne vois pas.

**Rachel** · 19/01/2012, 19h08

désolé, je n'avais pas vu tout ton code

donc voilà ce que tu dois faire :

Code :

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

1
2
3
$('#contenu').delegate($('#test'), "click", function(){
		alert('Test ok');
	});

Invité · 19/01/2012, 20h04

J'avais testé çà au post #6.

Je viens de tester de nouveau et l"événement se déclenche sur le clic de la div contenu et non sur le bouton Test.

Merci

**Macmillenium** · 19/01/2012, 22h26

La syntaxe n'est pas bonne.

Code :

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

1
2
3
4
 
$('#contenu').delegate("#test", "click", function(){
		alert('Test ok');
	});

Invité · 20/01/2012, 11h19

Cela fonctionne

.

Merci à tous pour l'aide apportée.

Attacher fonction après chargement du bouton

jQuery

Discussions similaires

Partager

Partager