Attacher fonction après chargement du bouton [Résolu]

AdoOs · 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

rotrevrep · 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
 });
});

AdoOs · 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');
	});
 
});

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

AdoOs · 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

rotrevrep · 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');
	});

AdoOs · 19/01/2012, 17h11

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

Merci pour ton aide.

rotrevrep · 19/01/2012, 17h38

Citation:

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

AdoOs · 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.

rotrevrep · 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');
	});

AdoOs · 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');
	});

AdoOs · 20/01/2012, 11h19

Cela fonctionne

.

Merci à tous pour l'aide apportée.

19/01/2012, 14h15	#5
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 787 Points : 35 787	Utilise la délégation d'événements : .delegate() ou .on(). __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	10

19/01/2012, 17h11	#8
AdoOs Invité régulier Inscription : juin 2007 Messages : 53 Détails du profil Informations forums : Inscription : juin 2007 Messages : 53 Points : 9 Points : 9	Je viens de tester mais rien ne se passe sur le clic du bouton Test. Merci pour ton aide.
	00

19/01/2012, 20h04	#12
AdoOs Invité régulier Inscription : juin 2007 Messages : 53 Détails du profil Informations forums : Inscription : juin 2007 Messages : 53 Points : 9 Points : 9	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
	00

20/01/2012, 11h19	#14
AdoOs Invité régulier Inscription : juin 2007 Messages : 53 Détails du profil Informations forums : Inscription : juin 2007 Messages : 53 Points : 9 Points : 9	Cela fonctionne . Merci à tous pour l'aide apportée.
	00

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