JQuery не работает после AJAX Pagination

Question

У меня есть функция / скрипт JQuery, которую я использую для постов в блоге, при наведении на изображение поста отображаются заголовок поста, отрывок и ссылка.

Кроме того, у меня запущен скрипт разбиения на страницы AJAX Fade Out / Fade In, и когда я перехожу к следующему набору постов в нумерации страниц, первый скрипт JQuery больше не запускается.Я знаю, что мне нужно как-то использовать функцию .live для jQuery, однако я не могу понять это.Вот два сценария.

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