Bouton injecté par AJAX ne fonctionne pas

Par RiderFx3, il y a 9 ans

Javascript

Bonjour,

Voilà mon soucis, j'ai de base un bouton qui est lié à une fonction jquery.
Sur un site, j'affiche les 4 derniers articles, et je souhaite pouvoir afficher les 4 précédents à l'aide d'un bouton "plus ancien"
Ce bouton appelle un script en Ajax, qui génère du code HTML, et me renvoie le HTML (l'aperçu des 4 articles plus anciens) ainsi que de nouveaux boutons 'plus anciens' et "plus récent' (pour pouvoir revenir aux articles de base.

Le problème étant que comme j'injecte des boutons via le script AJAX, après le chargement du DOM (je suppose que le problème vient de là) et bien ces boutons n'ont aucun effet et n'appellent pas la fonction jquery, malgré le fait que la classe du bouton liée à la fonction jQuery n'a pas changé.

Mon code pour les boutons

<div id="accueil-prev-next"> <?php if( $p_datas['start'] > 4 ){ ?> <a href="#" start="<?php echo $p_datas['start'];?>" class="bouton-prev-next index-prev-next">< Plus récent</a> <?php } if( $p_datas['start'] < 16 ){?> <a href="#" start="<?php echo $p_datas['start'] + 4;?>" class="bouton-prev-next index-prev-next">Plus ancien ></a> <?php } ?> </div>

Ma fonction jQuery

//Récupération des 4 items suivants sur l'accueil $('.index-prev-next').on( 'click', function(e){ e.preventDefault(); start = $(this).attr('start'); //Je récupère l'offset pour la requête url = 'index.php?c=Index&a=getNext4Items&start='+start; //J'appelle l'URL qui va générer le code HTML $.ajax( url ).done( function( data, text, jqxhr ){ console.log( data ); $('.last-news').html( jqxhr.responseText ); //Je réinjecte le code HTML dans la div }); });

Ce que j'obtiens

Et bien, la première fois que je clique, la fonction est bien appelée et l'injection se fait, ça m'affiche alors le contenu et les nouveaux boutons, et lorsque je clique sur les nouveau boutons, le script n'est pas appelé (vérifié dans la console onglet network rien ne se passe)

Voici un aperçu :
https://drive.google.com/file/d/0BwyfqcrcYxKEQ0Y1X2ZvOWUzcGM/view?usp=sharing

4 réponses

Mehdikacim, il y a 9 ans

Il faut utiliser une fonction live :

$(document).on('click', '#id ou .class', function() { CODE A EXECUTER });
RiderFx3, il y a 9 ans

ça fonctionne, génial merci bcp ! :D

Mehdikacim, il y a 9 ans

De rien :)

C'est normal le dom est chargé avant, en utilisant la fonction live ( $(document) tu le recharge :)

Huggy, il y a 9 ans

C'est pas vraiment ça,
en réinjectant le bouton, tu perds le handler d'évènement placé dessus
Pour éviter ça il faut mettre le handler à un niveau supérieur, une div ou autre chose
Il y a une vidéo de Grafikart qui explique ça "Jquery.on"