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

Question

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

Кроме того, у меня есть AJAX Fade Out/Fade В скрипте разбиения на страницы и когда я перехожу к следующему набору сообщений в разбивке на страницы, первый скрипт 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 в функцию и вызвать его после каждого АЯКС нагрузки:

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