Bonjour,
Je suis en train de suivre un tutoriel sur jQuery et j'aimerai comprendre un comportement qui parait logique pour l'auteur mais pas pour moi.
J'ai le code suivant :
Code HTML : 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 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> </head> <body> <button id="execute">Cloner</button> <div id="target">Démo</div> <div id="container"></div> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script> <script> $(function () { // clone l'élément identifié en tant que "target" var $item = $('#target').clone(); // Enlève l'attribut Id au nouvel élément $item.removeAttr('id'); $('#execute').click(function () { // Ajoute l'élément à la fin de // l'élément identifié en tant que "target" $('#container').append($item); }); }); </script> </body> </html>
Sur le clic j'ai une deuxième ligne "Démo" qui apparaît.
Ce clic ne fonctionne qu'une seule fois.
Pour que ça fonctionne sur chaque clic, il faut re-cloner l'item de la manière suivante :
Code jQuery : Sélectionner tout - Visualiser dans une fenêtre à part $('#container').append($item.clone());
Pour l'auteur, c'est normal mais il ne donne pas plus d'explications, alors ça doit couler de source.
sauf que j'ai beau me torturer l'esprit :
- Ce n'est pas parce qu'il a oublié la référence à $item après l'exécution du load sinon je ne pourrai pas m'en resservir pour le cloner.
- Ce n'est pas parce que ce n'est pas un contenu HTML mais un objet jQuery car le deuxième appel à clone() renvoie aussi un objet jQuery
- Si je n'enlève pas l'id, ça marche mais ne vois pas ce que fait removeAttr en plus d'enlever l'id.
Bref, ça me torture l'esprit et j'aimerai bien comprendre...
Partager