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 !"

**SpaceFrog** · 24/07/2012, 18h56

ben si les elements n'existent pas au moment du ready ... il est normal que l'on ne puisse pas leur attribuer directement d'evenements.

il faut par par on() ou delegate()

sinon au moment de sa création ...

Code :

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

1
2
3
function changeBloc_2_from_1(){
	$('#ajaxBloc2').append($('<span/>').attr('id',"idBloc_2").click( changeBloc_3_from_2).text('-> maintenant, changer le Bloc 3')
}

Invité · 24/07/2012, 19h23

Merci SpaceFrog,
delegate() fonctionne (dans mon exemple simpliste) :

Code :

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

1
2
3
	$('body').delegate('#idBloc_2', 'click', function () {
		changeBloc_3_from_2();
	});

Je teste en "situation réelle" tout de suite...

[EDIT] Nickel chrome ! ca fonctionne très bien (listes liées jQuery/Ajax...)

Encore merci à la Grenouille de l'Espace.

**SpaceFrog** · 24/07/2012, 20h54

oui et au passage le 3 paramètre étant une fonction

Code :

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

$('body').delegate('#idBloc_2', 'click', changeBloc_3_from_2);

un petit résolu pour la route ?

**NoSmoking** · 24/07/2012, 23h05

Bonsoir,
il semblerait préférable de migrer vers .on().

Code :

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

$(document).on( 'click','#idBloc_2', changeBloc_3_from_2)

ou mieux

Code :

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

$('#ajaxBloc2').on( 'click','span', changeBloc_3_from_2);

Invité · 25/07/2012, 10h20

Merci NoSmoking,
j'avais essayé, mais avec une mauvaise syntaxe.

En effet, ceci fonctionne :

Code :

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

1
2
3
4
	$('#ajaxBloc2').on('click', '#idBloc_2', function () {
		changeBloc_3_from_2();
		// ...autres actions : appels ajax, coup de téléphone à un ami, 50-50, joker,... c'est mon dernier mot Jean-Pierre,...
	});

Bloc 1 : -> changer le Bloc 2
Bloc 2 : -> maintenant, changer le Bloc 3
Bloc 3 : youpi ! ca marche !

PS :
- dans la "vraie vie", je fais appel à plusieurs actions (pas uniquement changeBloc_3_from_2()).
- et je mets '#idBloc_2' car mon action s'effectue (toujours dans la "vraie vie") sur un <input>, un <select>, ou autre...
- l'action elle-même peut être 'click', 'change', 'keyup',...

Voici ce que j'obtiens dans la "vraie vie" (listes liées Pays/départements/CP/Ville) :

Code javascript :

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
$(document).ready(function(){
	/* PAYS : select -> on change */
	$('body').on('change', '#'+id_paysId, function () {
		changeDeptSelectFromPays();
		resetCPInput();
		resetVilleInput();
	});
 
	/* DEPARTEMENT : select -> on change */
	$('body').on('change', '#'+id_deptId, function () {
		changeCPInputFromDept();
		changeVilleSelectFromDept();
	});
 
	/* CP : input -> on keyup */
	$('body').on('keyup', '#'+id_CP, function () {
		changeVilleSelectFromCP();
	});
 
	/* VILLE : input -> on keyup */
	$('body').on('keyup', '#'+id_Ville, function () {
		changeCPSelectFromVille();
	});
	/* VILLE : select -> on change */
	$('body').on('change', '#'+id_Ville, function () {
		changeCPSelectFromVille();
	});
 
});

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager