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

Question

在我的主页上,我有一个使用无限滚动的帖子循环.用户可以使用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无限滚动插件的最新版本2.0b2.120519 .

Answer 1

我不能 100% 确定您正在使用该插件的哪个版本，但我检查了最新的发行版，您需要执行两种方法才能完成这项工作。

首先，在您的 ajax 函数中，您需要destroy the session on success.

$.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',
      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');
      }
    });
  }
});

您还可以将其设为一个函数，绑定到它，然后取消绑定/重新绑定，而不是重复大量代码，但我概述的代码应该是复制+粘贴解决方案。