id (créé à la volée) non interprété
Bonjour,
voici un exemple simpliste de mon questionnement :
Code:
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> |
Citation:
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"
Citation:
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:
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:
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 !"
