Id modifié qui ne réagit pas au clic -> ?

**souffle56** · 01/09/2010, 16h08

Bonjour,

Je viens de programmer une fonction de type "slide" (voir code ci-dessous) qui marche plutôt bien, à savoir : Quand je clique sur le div de gauche, un nouveau div apparait, de façon progressive... Le hic, c'est que, si je clique à nouveau sur le div de gauche, l'animation ne se fait plus... Si, par contre, je clique sur le div central (Menu_present), là, ça fonctionne !
Autrement dit, bien que j'ai demandé, en fin d'animation, que la div qui se trouve à présent à gauche (<div id="Menu_precedant">) ait son id transformé en "Menu_avant"), c'est le div qui est devenu central qui réagit au clic, comme si il avait toujours l'id "Menu_avant" !
-> Est-ce que quelqu'un saurait m'expliquer ce qui se passe ? Et, peut-être, me proposer une alternative (js ou jQuery) pour que l'affiliation d'un nouvel id "Menu_avant" soit vraiment prise en compte au niveau du clic ?

En vous remerciant par avance !

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<html>
<head>
<title>Test</title>
 
	<script type="text/javascript" src="http://souffle56.fr/Site/1-Trouver_les_ressources/Ressources/js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="http://souffle56.fr/Site/1-Trouver_les_ressources/Ressources/js/jquery-ui-1.8.1.custom.min.js"></script>
 
	<style type="text/css">
	body
	{
	   background-color: #FFFFFF;
	   background-image: url("images/Fond.png");
	}
 
	#Container_menu 
	{ 
		left: 150px; 
		top: 150px; 
		width: 457px; 
		height: 400px; 
		padding: 5px;
		background-color: #AA5515;
	}
 
	#Menu_precedant
	{ 
		width: 0px; 
		height: 400px; 
		float: left; 
		background-color: #FFE0C1;
		border-right: 1px solid #B2B2B2;
	}
 
	#Menu_avant 
	{ 
		width: 150px; 
		height: 400px; 
		float: left; 
		background-color: #FFE0C1;
		border-right: 1px solid #B2B2B2;
	}
 
	#Menu_present 
	{ 
		width: 150px; 
		height: 400px; 
		float: left; 
		background-color: #FFD9B3;
		border-right: 1px solid #B2B2B2;
	}
 
	#Menu_apres 
	{ 
		width: 150px; 
		height: 400px; 
		float: left; 
		background-color: #FED1A5;
		border-right: 1px solid #969696;
	}
 
	#Menu_suivant
	{ 
		width: 0px; 
		height: 400px; 
		float: left; 
		background-color: #FED1A5;
		border-right: 1px solid #969696;
	}	
</style>
 
<script type="text/javascript">
	//<![CDATA[
	$(function(){
 
		$('#Menu_avant')
			.click(ouverture_precedant)
 
	})
 
	function ouverture_precedant() {
		$("#Menu_precedant").animate({
			width:'150'
			},2900,function(){
 
			$('div').remove('#Menu_suivant');
			$('div').remove('#Menu_apres');
 
			/* Remplacement des identifiants suivants */
			document.getElementById("Menu_present").id="Menu_apres";
			document.getElementById("Menu_avant").id="Menu_present";
			document.getElementById("Menu_precedant").id="Menu_avant";
 
			$('<div id="Menu_suivant"></div>').insertAfter('#Menu_apres');
			$('<div id="Menu_precedant"></div>').insertBefore('#Menu_avant');
			});
 
		$("#Menu_apres").animate({
			width:'0'
			},2900);
 
	};
 
	//]]>
</script>
 
</head>
<body>
 
<div id="Container_menu">
	<div id="Menu_precedant">0</div>
	<div id="Menu_avant">1</div>
	<div id="Menu_present">2</div>
	<div id="Menu_apres">3</div>
	<div id="Menu_suivant">4</div>
</div>
 
</body>
</html>

**Mahefasoa** · 02/09/2010, 07h59

Bonjour,

Ce que je te propose c'est de modifier le code js suivant

Code :

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

1
2
3
4
 
$(function(){
    $('#Menu_avant').click(ouverture_precedant);
});

en

Code :

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

1
2
3
4
5
6
 
$(function(){
    $('#Menu_avant').live('click',function(){
        ouverture_precedant();
    });
});

En espérant de t'avoir aidé.

Bien cordialement,

**souffle56** · 02/09/2010, 16h54

C'est génial...
Merci beaucoup Mahefasoa, c'est effectivement exactement ce dont j'avais besoin; ça marche vraiment impeccable !

Trop cool !

Bonne continuation à toi !

**Mahefasoa** · 02/09/2010, 17h22

Dans ce cas, n'oublie pas de mettre ce topic sur résolu. ;-)

@+

Id modifié qui ne réagit pas au clic -> ?

jQuery

Vue hybride

Discussions similaires

Partager

Partager