Déplacer des images lorsqu’on clique avec JavaScript

[Spead1963]

Bonjour, je débute en JS et je veux déplacer des images sur une page HTML. Le problème, c’est qu’après un clic, l’image se place correctement mais je ne peux plus la bouger sans rafraîchir la page.
Voici le code:
-----------------------------------------------------------------------------------------------------------
<!-- La zone qui comprend les images à sélectionner -->

<div id="zoneEchantillon">
<div id="title" style="text-align: right;padding-right: 10px">A choisir</div>

<div id="echantillon" style="text-align: right;padding-right: 10px">
<img src="Debut.jpg" height="30" width="30">
<img src="Etape1.jpg" height="30" width="30">
<img src="Etape2.jpg" height="30" width="30">
<img src="Tempo.jpg" height="30" width="30">
<img src="Output.jpg" height="30" width="30">
<img src="Input.jpg" height="30" width="30">
<br>
<img src="Condition.jpg" height="30" width="30">
</br>
</div>

</div>

<!-- la zone avec les 3 images sélectionnées -->
<div id="selection"style="text-align: center;padding-right: 10px">
<div id="title">Assemblez votre shémas</div>
</div>

<!--la zone de texte qui apparaît lors du survol d'une image, par défaut elle sera invisible -->
<div id="texte">

</div>

<script>
$( document ).ready(function() {
$("#echantillon img").click(function() {
$("#selection").append('<div class="choisie"><img src="'+$(this).attr('src')+'"></div>');
$(this).remove()
});
});
</script>


--------------------------------------------------------------------------------------------------------------
Le but est de faire une sorte de Grafcet mais si l'on se trompe d'image, pouvoir revenir en arrière plutôt que devoir tout recommencé.

Merci de votre aide et de votre temps.
Cordialement

[Margie129Palmer]

Le problème vient du fait que votre événement .click() ne s'attache qu'aux éléments présents au chargement initial de la page. Pour corriger cela, vous devez utiliser la délégation d'événements avec la syntaxe $(document).on("click", "selecteur", ...). Cela permet au JavaScript de surveiller les clics même sur NC E-ZPass les images ajoutées dynamiquement après le chargement, car l'écouteur est placé sur un parent stable (le document) plutôt que sur l'élément lui-même.