JQuery不能在AJAX分頁之後工作

Question

我有一個JQuery函數/腳本，用於博客上的帖子，懸停後的圖像顯示帖子標題，摘錄和鏈接。

此外，我有一個AJAX Fade Out/Fade In分頁腳本運行，當我轉到分頁中的下一篇文章時，第一個JQuery腳本不再運行。我知道我需要爲jQuery使用.live函數，但我似乎無法弄清楚。這是兩個腳本。

<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> 

感謝您的幫助。

Answer 1

你可以把capslide命令到一個函數和每個AJAX加載後調用它：

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 
    }); 
    }); 
});