JQuery not working after AJAX Pagination - ajax

Question

I have a JQuery function/script that I'm using for posts on a blog that upon hover of the post image shows the post title, excerpt, and link.
Additionally, I have an AJAX Fade Out/Fade In pagination script running and when I go to the next set of posts in the pagination, the first JQuery script doesn't run any longer. I know I need to be using the .live function somehow for jQuery, however I can't seem to figure it out. Here are the two scripts.
<script type="text/javascript">
$(function() {
$(".capslide_img").capslide({
caption_color : '#516077',
caption_bgcolor : '#dbe2f0',
overlay_bgcolor : '#dbe2f0',
border : '4px solid #dbe2f0',
showcaption : false
});
});
</script>
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function(){
jQuery('#postPagination a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#page-wrap').fadeOut(500).load(link + ' #contentInner', function(){ jQuery('#page-wrap').fadeIn(500); });
});
});
</script>
Thanks for your help.

Answer 1

you could put the capslide command into a function and call it after each ajax load:
function addCappslide() {
$(".capslide_img").capslide({
caption_color : '#516077',
caption_bgcolor : '#dbe2f0',
overlay_bgcolor : '#dbe2f0',
border : '4px solid #dbe2f0',
showcaption : false
});
}
$(function() {
addCappslide(); // call it once the page has loaded
$('#postPagination a').live('click', function(e){
e.preventDefault();
var link = $(this).attr('href');
$('#page-wrap').fadeOut(500).load(link + ' #contentInner', function(){
jQuery('#page-wrap').fadeIn(500, addCappslide() ); // call it after each ajax load again after it faded in
});
});
});