Les fonctions jquery ne fonctionnent pas correctement après .html reload

Question

J'ai une page avec une liste d'éléments initialement chargés depuis une ligne include_once('show_calendarV2.php');. À côté de chaque élément se trouve une icône de suppression qui déclenche la commande jquery suivante pour supprimer l'élément de la base de données, puis mettre à jour la page.

$('.delete_schedule_item').click(function() { 
    var id = $(this).next('input[type=hidden]').attr('value'); 
    alert (id); 

    $.ajax({ 
      url: 'ajax/delete_schedule_item.php', 
      type: 'post', 
      data: { id: id }, 
      dataType: 'json', // get back status of request in JSON 
      success: function(data) 
      { 
       //alert('item deleted'); 
      } 
     //   if (data.status) { 
     //   alert('success'); 
     //   } 
     //   else { 
     //    alert('error'); 
     //   }, 
     //... other parameters/callbacks ... 
     }); 

    $.get('show_calendarV2.php', {},  
     function(data) 
     { 
     //load the calendar data 
     $("#calendar").html(data); 

     }); 
    }); 

Tout fonctionne correctement la première fois qu'un élément est supprimé. L'élément a été supprimé. La nouvelle page est chargée.

Mais après que la page charge les boutons de suppression? appels jquery? ne fonctionne plus.

La même page est utilisée pour créer l'affichage initial ainsi que l'affichage actualisé. Je ne suis donc pas sûr de l'échec du code.

Des idées?

Answer 1

Essayez de changer

$('.delete_schedule_item').click(function() { 

à

$('.delete_schedule_item').live("click", function() { 

Si vous chargez un tas de nouveaux html, la fonction que vous avez exécuté avant ne s'appliquerait pas plus. Et puisque vous le chargez via Ajax, la fonction n'est pas exécutée à nouveau une fois le chargement terminé.

La beauté des fonctions live() et die() dans jquery est qu'ils prennent soin de cette situation. Chaque fois que quelque chose de nouveau est chargé et correspond au sélecteur, les nouveaux éléments sont automatiquement mis à jour.

Answer 2

utiliser la délégation de l'événement:

$('.delete_schedule_item').live("click", function() {... 

délégation de l'événement à l'aide live se refixer automatiquement des gestionnaires d'événements aux éléments nouvellement injectés. Lorsque vous remplacez une section de votre page web par du nouveau contenu via ajax, tous les gestionnaires d'événements liés aux anciens éléments ne seront pas automatiquement attachés aux fichiers nouvellement injectés, sauf si vous utilisez la délégation d'événement (ou réattachez le gestionnaire d'événements dans le rappel de votre méthode ajax).

Pour la délégation d'événements avec live pour fonctionner, vous devez utiliser jQuery 1.3 ou supérieur.

Answer 3

La raison pour laquelle cela ne fonctionne plus est que les gestionnaires d'événements sont ajoutés aux éléments DOM eux-mêmes. Lorsque vous chargez un nouveau code HTML via AJAX, les anciens éléments associés aux gestionnaires d'événements sont supprimés et les nouveaux éléments, sans les gestionnaires, sont remplacés à leur place. Il existe deux solutions possibles: d'abord, vous pouvez réappliquer les gestionnaires au code HTML nouvellement chargé. Il suffit de relancer le code qui configure le gestionnaire d'événements sur le code HTML que vous avez chargé. L'autre option, que vous pouvez utiliser dans ce cas car l'événement click est géré par live, consiste à utiliser les gestionnaires d'événements live comme le suggèrent @womp et @ karim79. Notez qu'il existe certaines limitations avec les gestionnaires en direct: ils ne s'appliquent pas à tous les types d'événements (cliquez sur travaux) et ne fonctionnent pas correctement avec la propagation (c'est-à-dire que l'arrêt de la propagation ne fonctionne pas). Voir les documents jQuery pour live pour plus d'informations.