jquery – 如何使用新的ajax内容进行无限滚动重置

在我的主页上,我有一个使用无限滚动的帖子循环.用户可以使用ajax(如ajax搜索等)将该循环替换为其他循环.我的问题是无限滚动仅在第一次使用时才起作用,因此如果它被主循环触发,那么当新循环替换主循环时它将不再起作用.每次新循环替换旧循环时,重新加载以下函数.因此,每次调用新循环时,如何进行无限滚动重置和工作？

var href = 'first';
$(document).ready(function() {
    $('#boxes').infinitescroll({
        navSelector: '.infinitescroll',nextSelector: '.infinitescroll a',itemSelector: '#boxes .box',loadingImg: '<?php echo get_bloginfo('stylesheet_directory') ?>/images/loading.gif',loadingText: 'Loading...',donetext: 'No more pages to load.',debug: false
    },function(arrayOfNewElems) {
        $('#boxes').masonry('appended',$(arrayOfNewElems));
        if(href != $('.infinitescroll a').attr('href')) {
            href = $('.infinitescroll a').attr('href');
        }
    });
});

我在wordpress网站上使用Pual Irish infinite scroll plugin的最新版本2.0b2.120519.

解决方法

我不是100％确定你正在使用哪个版本的插件,但我检查了最新的发行版,你需要执行两种方法来使这项工作.

首先,在你的ajax函数中,你需要在成功时销毁会话.

$.ajax({
  url: 'path/to/something.ext',success: function(data){
    //call the method to destroy the current infinitescroll session.
    $('#boxes').infinitescroll('destroy');

    //insert the new data into the container from the_loop() call
    $('#boxes').html(data);

    //reinstantiate the container
    $('#boxes').infinitescroll({                      
      state: {                                              
        isDestroyed: false,isDone: false                           
      }
    });

    //call the methods you need on the container again.
    $('#boxes').infinitescroll({
      navSelector: '.infinitescroll',function(arrayOfNewElems) {
      $('#boxes').masonry('appended',$(arrayOfNewElems));
      if(href != $('.infinitescroll a').attr('href')) {
        href = $('.infinitescroll a').attr('href');
      }
    });
  }
});

你也可以使它成为一个函数,绑定它,解除绑定/重新绑定而不是重复很多代码,但我概述的代码应该是一个复制粘贴解决方案.