Ajout et hide d'un élément
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:
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 !
