id (créé à la volée) non interprété

Invité · 24/07/2012, 18h04

Bonjour,
voici un exemple simpliste de mon questionnement :

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
<!DOCTYPE HTML><html>
<head>
<!-- Scripts jQuery : initialisation -->
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#idBloc_1').click( function () {
		changeBloc_2_from_1();
	});
	$('#idBloc_2').click( function () {
		changeBloc_3_from_2();
	});
});
function changeBloc_2_from_1(){
	var txthtml = 'Bloc 2 : <span id="idBloc_2">-> maintenant, changer le Bloc 3</span>';
	$('#ajaxBloc2').html(txthtml);
}
function changeBloc_3_from_2(){
	var txthtml = 'Bloc 3 : youpi ! ca marche !';
	$('#ajaxBloc3').html(txthtml);
}
</script>
</head>
<body>
		<p>Bloc 1 : <span id="idBloc_1">-> changer le Bloc 2</span></p>
		<p id="ajaxBloc2">Bloc 2 : (...)</p>
		<p id="ajaxBloc3">Bloc 3 : (...)</p>
</body>
</html>

Bloc 1 : -> changer le Bloc 2
Bloc 2 : (...)
Bloc 3 : (...)

1/ On clique sur "-> changer le Bloc 2" :
le Bloc 2 affiche "Bloc 2 : -> maintenant, changer le Bloc 3"

Bloc 1 : -> changer le Bloc 2
Bloc 2 : -> maintenant, changer le Bloc 3
Bloc 3 : (...)

2/ MAIS quand on clique ensuite sur "-> maintenant, changer le Bloc 3", CA NE fonctionne PAS...

Je pense que ça vient du fait que <span id="idBloc_2"> ne soit pas dans le DOM "de départ", mais j'aimerais :
- comprendre pourquoi ça ne fonctionne pas,
- et surtout comment y remédier !
Merci.

PS1 : Je voudrais éviter la solution (qui fonctionne, mais... ceci n'est qu'un exemple simpliste...) :
=> re-déclarer $('#idBloc_2').click(........) DANS la fonction changeBloc_2_from_1()

Code :

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

1
2
3
4
5
6
7
8
function changeBloc_2_from_1(){
	var txthtml = 'Bloc 2 : <span id="idBloc_2">-> maintenant, changer le Bloc 3</span>';
	$('#ajaxBloc2').html(txthtml);
	// ON REMET ICI : 
	$('#idBloc_2').click( function () {
		changeBloc_3_from_2();
	});
}

PS 2 : je voudrais éviter aussi de mettre des onclick="..." ou onchange="..." ou autres dans le code html
Comme ici : (ca fonctionne très bien, mais c'est justement ce que je ne veux pas faire !) :

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
<!DOCTYPE HTML><html>
<head>
<!-- Scripts jQuery : initialisation -->
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
function changeBloc_2_from_1(){
	var txthtml = 'Bloc 2 : <span id="idBloc_2" onclick="changeBloc_3_from_2();">-> maintenant, changer le Bloc 3</span>';
	$('#ajaxBloc2').html(txthtml);
}
function changeBloc_3_from_2(){
	var txthtml = 'Bloc 3 : youpi ! ca marche !';
	$('#ajaxBloc3').html(txthtml);
}
</script>
</head>
<body>
		<p>Bloc 1 : <span onclick="changeBloc_2_from_1();">-> changer le Bloc 2</span></p>
		<p id="ajaxBloc2">Bloc 2 : (...)</p>
		<p id="ajaxBloc3">Bloc 3 : (...)</p>
</body>
</html>

PS : vous aurez compris que les variables "var txthtml = ..." peuvent provenir d'un appel Ajax, et être bien plus complexe qu'un simple "youpi !"

id (créé à la volée) non interprété

jQuery

Mode arborescent

Discussions similaires

Partager

Partager