JQuery的AJAX分页后不工作 [英] JQuery not working after AJAX Pagination

问题描述

我有一个jQuery函数/脚本，我使用了一个博客，在后图像的悬停显示文章标题，摘录和链接的帖子。

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.

此外，我有一个AJAX淡出/淡入运行分页脚本，当我去到下一组的分页职位，第一个jQuery脚本不运行任何更长的时间。我知道我需要使用.live函数莫名其妙的jQuery，但我似乎无法弄清楚。这里有两个脚本。

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.

推荐答案

你可以把 capslide 命令变成一个功能，每一个AJAX加载后调用它：

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

这篇关于JQuery的AJAX分页后不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！