2010-10-17 14 views
0

Voici ma simple fonction jQuery pour mettre à jour partiellement une pagejQuery mise à jour ajax partielle de la page

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#prevlinkh").click(function() { 
     var pagenumber = $("#prevlinkh").attr("pn"); 
     $("#filelist").load('/uploads/<%=FileCategoryName %>/' + pagenumber + " #filelist>*", ""); 
     return false; 
    }); 

    $("#nextlinkh").click(function() { 
     var pagenumber = $("#nextlinkh").attr("pn"); 
     $("#filelist").load('/uploads/<%=FileCategoryName %>/' + pagenumber + " #filelist>*", ""); 
     return false; 
    }); 
}); 
</script> 

il est appelé à partir

<a id="prevlinkh" pn="10" href="/uploads/All/10">Previous</a> 
<a id="nextlinkh" pn="12" href="/uploads/All/12">Next</a> 

liens ci-dessus sont dans la div (filelist) qui a mis à jour partiellement .

Le problème est que la requête ajax fonctionne à la première demande mais pas à la seconde. la deuxième requête est appelée en tant que lien normal. Comme je comprends les liens nouveaux et précédents nouvellement chargés, comment ne pas entrer dans DOM.

Comment puis-je modifier cela en cliquant sur les liens next/prev lors de la deuxième requête d'appels ajax. J'espère que ma question est suffisamment claire

Répondre

2

L'une des façons les plus simples est d'utiliser la fonction live() jQuery:

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#prevlinkh").live('click',function() { 
     var pagenumber = $("#prevlinkh").attr("pn"); 
     $("#filelist").load('/uploads/<%=FileCategoryName %>/' + pagenumber + " #filelist>*", ""); 
     return false; 
    }); 

    $("#nextlinkh").live('click',function() { 
     var pagenumber = $("#nextlinkh").attr("pn"); 
     $("#filelist").load('/uploads/<%=FileCategoryName %>/' + pagenumber + " #filelist>*", ""); 
     return false; 
    }); 
}); 
</script> 

Il y a aussi la possibilité d'utiliser delegate(), qui pourrait être plus approprié à vos besoins, mais je ne suis pas entièrement sûr.

1

Le problème est que vous liez l'événement click lors du chargement du document. Ensuite, lorsque les éléments sont remplacés, ils sont rechargés sans rien lié à eux. Vous pouvez soit les relier, soit utiliser la méthode live() de jQuery.

http://api.jquery.com/live/