6

在我的主页上，我有一个使用无限滚动的帖子循环。用户可以使用 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。

4

4 回答 4

3

我不能 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');
      }
    });
  }
});

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

于 2012-06-30T04:12:01.773 回答
1

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

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

         //    }

            });

每次我删除日期并创建一个新的无限滚动。所以每一次每一个元素都是好的。

于 2013-03-13T03:41:14.210 回答
1

适用于 v2.0b.120520

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

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

于 2013-09-17T03:52:28.807 回答
0

称呼

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

希望它有效

于 2013-06-03T12:19:20.630 回答