Discussion :

[grinder59]

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 !

[headmax]

Salut,
Imagine une base de donnée c'est le "html" on y voit les classes css les id's et concepts (champs, columns..) liée a une Requête SQL ...
Sauf que dans ton cas on a juste la requête SQL sans accès à la base de donnée donc je vois pas trop comment répondre a ton problème, a moins d'y introduire ce texte et te faire prendre conscience que ne nous sommes pas devin.
Mais je vais essayer une réponse au pif :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
     // création du tag avec la croix de retrait
            var span = '<span onclick="javascript:$(this).hide();" class="" id="sel'+selVal+'"><i class="fa fa-times unselectDest" id="'+selVal+'" style="le style"></i>'+selText+'</span> ';

[grinder59]

Je vois pas trop le lien avec la BD dans ton image...

Ce que je comprends, c'est que mon élément ne peut pas être masqué dynamiquement car l'événement jQuery en charge de cela ne sait pas encore qu'il existe, Dans ce cas, la seule possibilité pour masquer l'élément est de faire porter l'action de masquage directement par l'élément (comme dans ton exemple) et non par la déclaration d'un événement on click.

Ma compréhension est bonne ?

[headmax]

Dans ma requête j'exprimais l'envie du code HTML accompagné mais bon c'est pas grave.
Pour ce qui est de ta réponse je pense que tu as compris j'attache l'événement onlick (ajout d'un attribut event=lafunction()) a l'élément créé à la volé qui n'existe pas encore.

[grinder59]

ça semble évident après coup !
merci de ton aide !

[Bovino]

En plus simple, il suffit d'utiliser la délégation d'événement...
http://api.jquery.com/on/#direct-and-delegated-events.