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...