jQuery, le contenu AJAXed perdre son bind

Question

Alors imaginez ce scénario, j'ai une liste et il y a un peu de pagination, quand l'utilisateur clique sur suivant, le lien est piraté par jQuery, il utilise la fonction $.ajax (dont J'ai fourni ci-dessous) pour aller chercher le contenu de la page suivante et les afficher dans le conteneur d'origine. Cela inclut les liens de pagination ainsi que nous voulons les mettre à jour aussi.

Le premier changement de page fonctionne très bien, mais à ce stade nous avons perdu la liaison entre notre élément de lien et notre règle jQuery:

$('#paging a').click(function(event) { 
    event.preventDefault(); 
    getElementContents('#target_container','',$(this).attr('href'),false); 
    // arguements are (target element, data (for $ajax), url (for $ajax), highlight) 
}); 

Quelles options dois-je maintenir la liaison entre l'événement et la fonction?

Pour référence, voici ma fonction wrapper pour $.ajax:

var ajax_count = 0; 
function getElementContents(target,data,url,highlight) { 
    if(url==null) { 
     url='/'; 
    } 
    if(data==null) { 
     var data=new Array(); 
    } 
    if(highlight==null || highlight==true) { 
     highlight=true; 
    } else { 
     highlight=false; 
    } 

    $.ajax({ 
     url: url, 
     data: data, 
     beforeSend: function() { 
      /* if this is the first ajax call, block the screen */ 
      if(++ajax_count==1) { 
       $.blockUI({message:'Loading data, please wait'}); 
      } 
     }, 
     success: function(responseText) { 
      /* we want to perform different methods of assignment depending on the element type */ 
      if($(target).is("input")) { 
       $(target).val(responseText); 
      } else { 
       $(target).html(responseText); 
      } 
      /* fire change, fire highlight effect... only id highlight==true */ 
      if(highlight==true) { 
       $(target).trigger("change").effect("highlight",{},2000) 
      } 
     }, 
     complete: function() { 
      /* if all ajax requests have completed, unblock screen */ 
      if(--ajax_count==0) { 
       $.unblockUI(); 
      } 
     }, 
     cache: false, 
     dataType: "html" 
    }); 
} 

Merci! :-)

EDIT

hmmm, juste trouvé this question ... :-) recherche en elle

Answer 1

essayez d'utiliser jquery.live:

$('#paging a').live('click', function(event) { 
    event.preventDefault(); 
    getElementContents('#target_container','',$(this).attr('href'),false); 
    // arguements are (target element, data (for $ajax), url (for $ajax), highlight) 
}); 

si vous utilisez jQuery 1.9 ou ci-dessus, .live n'existe plus, vous pouvez donc utiliser la fonction .on à la place:

$(document).on('click', '#paging a', function (event) { 
     event.preventDefault(); 
     getElementContents('#target_container','',$(this).attr('href'),false); 
}); 

Answer 2

Vos liens de pagination sont-ils également remplacés via la charge ajax? Si tel est le cas, il s'agit de nouveaux éléments DOM et les éléments de pagination d'origine (dont les gestionnaires d'événements étaient liés) ne sont plus présents. Si c'est le cas, vérifiez la méthode .live() de jQuery pour lier vos gestionnaires de clic.

Answer 3

Vous pouvez recréer l'événement dans la fonction de rappel de l'appel AJAX.

complete: function() { 
     /* if all ajax requests have completed, unblock screen */ 
     if(--ajax_count==0) { 
      $.unblockUI(); 


     } 
     $('#paging a').click(function(event) { 
      event.preventDefault(); 
      getElementContents('#target_container','',$(this).attr('href'),false); 
       // arguements are (target element, data (for $ajax), url (for $ajax), highlight) 
     }); 


    } 

Answer 4

Méthode .live() il a déjà été retiré sur le 1.9 Vertion de jQuery, au lieu qu'ils recommandent méthode d'utilisation .on().

Mais si vous avez une liste d'éléments et vous enveloppez ces éléments par son nom de classe comme $ (". View-page"). On ("click", function() {}); et vous chargez un autre morceau d'éléments (comme une page de pagination) de la même classe, la liaison sera perdue. L'ancienne méthode .live() a résolu ceci ("Joindre un gestionnaire d'événements pour tous les éléments qui correspondent au sélecteur actuel, maintenant et dans le futur.") mais vous pouvez faire la même chose en utilisant .on () sous une autre forme:

$(document).on("click", ".view-page", {}, function(event){ 
    // anything you want to do... 
}); 

cela ne lâche contraignant, même lorsque des morceaux d'éléments changent sur votre zone de pagination, parce que vous le précisiez jQuery que tout ce qui est dans les DOM en tout temps aura ce comportement.