Discussion :

[oliver-twist]

Bonjour à tous,

J'ai un petit souci.

J'ai une liste de type unordered list avec des item li avec chacun une class (delete_journee_etiquette) qui les lie avec un script jquery qui permet de réaliser une action ajax: effacer cet item.

Un autre script jquery permet de rajouter un item en ajax à cette liste.

Quand une entrée est rajoutée, un append() rajoute visuellement ce nouvel item à la liste sans avoir à recharger tout la liste.

Ce nouvel item a également la class qui devrait le lier au script permettant de pouvoir effacer cet item si on en a envie. Mais ce lien ne marche pas. Il devrait aller chercher le script via la class qu'il a mais il me fait un refresh de la page. Pas top puisque c'est le but contraire qui est recherché.

Script de la liste avant de rajouter un item :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<ul id="liste_etiquettes_journee_73" class="ul_dans_tableau">
        <li class="left_align id_journee_etiquette_1">
           <a href="" title="Effacer" class="delete_journee_etiquette" data-id-journee-etiquette="1"><i class="fas fa-trash fontawesome_so_small normal_color"></i></a> <span title="Créé le 18/07/2023 à 23:10:04 par olivier">Transfert Out</span>
        </li>
        <li class="left_align id_journee_etiquette_2">
             <a href="" title="Effacer" class="delete_journee_etiquette" data-id-journee-etiquette="2"><i class="fas fa-trash fontawesome_so_small normal_color"></i></a> <span title="Créé le 18/07/2023 à 23:10:09 par olivier">Vol client</span>
        </li>
        <li class="left_align id_journee_etiquette_536">
             <a href="" title="Effacer" class="delete_journee_etiquette" data-id-journee-etiquette="536"><i class="fas fa-trash fontawesome_so_small normal_color"></i></a> <span title="Créé le 20/07/2023 à 16:04:54 par olivier">Service Trek</span>
       </li>
</ul>

Et voici le script Jquery qui permet efface les item :

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
<script>
$(".delete_journee_etiquette").click(function() {
 
            var action='delete_journee_etiquette';
            var id_journee_etiquette=$(this).data('id-journee-etiquette');
 
            $.get('journees.php?action=' + action + '&id_journee_etiquette=' + id_journee_etiquette,function(data){
 
                $("#updates").html(data).fadeIn();
            });
 
            return false;
 
        });
</script>

Tout item présent dans la liste au moment de charger le script entier fonctionne, c'est à dire que l'on efface sans problème tout item souhaité.

Et maintenant le script qui insère le nouvel item dans la liste :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script>
     $(function(){
 
         var id_journee='<?php echo $id_journee;?>';
        var id_journee_etiquette='<?php echo $array['etiquettes']['id_journee_etiquette'];?>';
         var etiquette='<?php echo $array['etiquettes']['etiquette'];?>';
 
 
 
        $("#liste_etiquettes_journee_" + id_journee).append('<li class="left_align id_journee_etiquette_' + id_journee_etiquette +'"><a href="" title="<?php echo EFFACER;?>" class="delete_journee_etiquette" data-id-journee-etiquette="<?php echo $array['etiquettes']['id_journee_etiquette'];?>"><i class="fas fa-trash fontawesome_so_small normal_color"></i></a> <span class="orange" title="<?php echo RAJOUTE_RECEMMENT;?>">' + etiquette + '*</span></li>');
});
</script>

Et c'est là où ça bloque, l'item est bien ajouté à la liste MAIS le lien ne semble pas obéir à la class qui va bien, du coup, ça fait un refresh.

Quelle est la solution à cet épineux problème ? Suis-je passe à côté de quelque chose ?
Merci par avance pour toute aide précieuse

[Pytet]

Bonjour,

Puisque tu utilises jQuery, tu peux utiliser la délégation des événements via la fonction on() pour que tes listeners soient attachés aux éléments ajoutés via ajax :
https://learn.jquery.com/events/event-delegation/