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 infinite scroll plugin的最新版本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');
      }
    });
  }
});

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

Answer 2

我认为可以做到这一点。在我的页面中，我点击不同的元素加载不同的页面。这些页面也是infinitescroll。所以我修改下面的来源：

       // creation 
        case 'object':

            this.each(function () {

                var instance = $.data(this, 'infinitescroll');

            /*   if (instance) {

                    // update options of current instance
                    instance.update(options);

                } else {
             */
                $(this).removeData("infinitescroll");

                // initialize new instance
                 $.data(this, 'infinitescroll', new $.infinitescroll(options, callback, this));

         //    }

            });

每次我删除日期并创建新的infinitescroll。所以每一次和每一个元素都是好的。

Answer 3

适用于v2.0b.120520

$('#boxes').infinitescroll('binding','unbind');
$('#boxes').data('infinitescroll', null);

信用：http://www.powerhour.at/devblog/reset-jquery-infinitescroll-after-ajax-call/

Answer 4

致电

$('#boxes').infinitescroll({                      
                state: {                                              
                  isDuringAjax: false,
                    isInvalidPage: false,
            isDestroyed: false,
            isDone: false, // For when it goes all the way through the archive.
            isPaused: false,
            currPage: 1

                }
            });
then 
$('#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');
      }
    });

希望它有效

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

4 个答案: