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>1/ On clique sur "-> changer le Bloc 2" :Bloc 1 : -> changer le Bloc 2
Bloc 2 : (...)
Bloc 3 : (...)
le Bloc 2 affiche "Bloc 2 : -> maintenant, changer le Bloc 3"
2/ MAIS quand on clique ensuite sur "-> maintenant, changer le Bloc 3", CA NE fonctionne PAS...Bloc 1 : -> changer le Bloc 2
Bloc 2 : -> maintenant, changer le Bloc 3
Bloc 3 : (...)
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()
PS 2 : je voudrais éviter aussi de mettre des onclick="..." ou onchange="..." ou autres dans le code html
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(); }); }
Comme ici : (ca fonctionne très bien, mais c'est justement ce que je ne veux pas faire !) :
PS : vous aurez compris que les variables "var txthtml = ..." peuvent provenir d'un appel Ajax, et être bien plus complexe qu'un simple "youpi !"
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>
Partager