新しい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'); 
     } 
    }); 
}); 

私はワードプレスのサイトにPual Irish infinite scroll pluginの最新バージョン2.0b2.120519を使用しています。

Answer 1

使用しているプラ​​グインのバージョンは100％確信していませんが、最新のディストリビューションを確認しました。この操作を行うには2つの方法を実行する必要があります。

まず、あなたの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'); 
     } 
    }); 
    } 
}); 

また、その機能作り、それに結合し、およびunbind /コードの多くを繰り返すのではなく、再バインドが、私が概説したコードはコピー+ペーストソリューションでなければなりませんでした。

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

     // } 

      }); 

私は、日付を削除し、新しい無限の作成を作成するたびに。毎回、すべての恵みは良いです。コール

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

Answer 3

は、それがために

Answer 4

ワークス作品ホープv2.0b.120520

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

クレジット：http://www.powerhour.at/devblog/reset-jquery-infinitescroll-after-ajax-call/