Lien ne fonctionne pas après insertion dans une liste ul avec append()
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:
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:
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:
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
