Bonjour,

Je suis en train de développer une application qui permet notamment de sélectionner des destinations (pays, villes...) pour les ajouter à un div. Les éléments de ce div sont des tags qui ont des croix permettant de retirer l'élément cliqué de la liste, rien de bien compliqué et pourtant, j'ai un petit souci qui me pourrit la vie depuis quelques heures maintenant...

voici mon code :
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
 
    // clic sur le bouton ajouter
    $('.btnAjoutDestination').on('click', function(){
 
        var selVal = $('#destination').val();
        var selText = $('#destination option:selected').text();
 
        // si la valeur sélectionnée est > 0 et qu'elle n'est pas déjà dans la liste
        if (selVal > 0 && !($('#selectionDest').val().indexOf(selVal + ';') >= 0)){
 
            // ajout de l'id dans le champs caché selectionDest 
            $('#selectionDest').val($('#selectionDest').val() + selVal + ';');
 
            // création du tag avec la croix de retrait
            var span = '<span class="" id="sel'+selVal+'"><i class="fa fa-times unselectDest" id="'+selVal+'" style="le style"></i>'+selText+'</span> ';
 
            // ajout du tag au div des tags de destinations sélectionnées
            $('#tagDestinations').append(span);
        }
    });
 
    // clic sur la croix d'un tag
    $('.unselectDest').on('click', function(){
        $('#sel'+this.id).hide();
    });
Evidemment, les sélections sont mémorisées et le div "tagDestinations" contient, à l'affichage initial, ce que l'utilisateur avait précédemment sélectionné

Le problème :
Alors que le clic sur la croix d'un élément chargé à l'affichage fonctionne, si j'ajoute un élément (je vois le tag apparaître dans le div) et que je clique sur sa croix pour le retirer du div, cette élément ne disparaît pas !

Auriez-vous une idée ? une piste ?

Merci de votre aide !