14

ウェブサイトに無限スクロール jquery プラグインを使用しています ( https://github.com/paulirish/infinite-scroll )

私のページが検索であることを除いて、すべて問題ありません...何が起こるか：

1) ページに移動すると、ブラウザが自動的にあなたの位置を特定し、周囲のアイテム (バーなど) のリストを表示します...このリストのページネーションを回避するには、無限スクロールが必要です。ここまですべてが機能します...「無限ページの終わり」に到達でき、プラグインがスクロールから「バインドを解除」するという事実を除いて。

2) 今....入力テキストにアドレスを手動で挿入したいときは、自由にそれを行うことができます...アドレスを書き、Enter キーを押します...そして ajax を使用します (ページの更新なし)。緯度/経度を探し、住所を見つけ、ナビゲーション リンクを無限スクロールに変更します...そして、私はばかげているように感じますが、「再アクティブ化」または「再バインド」する方法がわかりません「イベントへのプラグイン....したがって、私の「新しい検索結果」には、新しい「無限スクロール」インスタンスがありません...

（ページ「分割」は正しく、「ページ= NUM​​BER」を変更しようとしているjsonを正しく返します）

コンソールでは次のようになります。

["math:", 0, 468]
jquery.infinitescroll.min.js:20["heading into ajax", 
Array[2]
    0 : "/ajax/getCoworkings/?page="
    1 : "&latitude=52.5234051&longitude=13.4113999&distance=12"
    length : 2
    __proto__ : Array[0]
]
jquery.infinitescroll.min.js:20["Using JSON via $.ajax() method"]
jquery.infinitescroll.min.js:20["Error", "end"]
jquery.infinitescroll.min.js:20["Binding", "unbind"]

「バインド解除」の後、再度バインドできないため、次の検索結果で無限スクロールが発生します........

4

8 に答える 8

28

infinitescrollは、を介してすべてのインスタンスデータを要素自体に$.data格納するため、そのインスタンスデータを削除することが、infinitescrollを完全にリセットする唯一の確実な方法です。

これらの2行は、無限スクロールをきれいに破壊するトリックを実行する必要があります。

$elem.infinitescroll('destroy');
$elem.data('infinitescroll', null);

//これで、前のインスタンスとの競合や問題が発生することなく、通常どおり無限スクロールを再初期化できます。

2012年6月の時点で、jquery.infinitescroll（v2.0）の最新バージョンでは以前の回答はどれも機能しなかったことに注意してください。

于 2012-06-22T07:29:37.997 に答える
5

解決しました。

私は追加しました：

if (xhr == 'destroy') {
    $.removeData(this.element[0]);
}

機能中

_error: function infscr_error(xhr) {

228行目。

おそらくそれはこれを行う最良の方法ではありませんが、まさに私が必要としていたものです。

そして、私が今していることは、基本的にあなたが提案したことです：

1.

$("#myelement").infinitescroll("destroy");

2.

$("#myelement").infinitescroll(WHATEVER_SETTINGS);

...「pathParse」値を変更する必要はありませんが、 それは、jQuery を使用して以前に
セレクター (next/nav)を変更しているためです。

于 2011-10-29T15:15:59.850 に答える
3

他の解決策を無駄に試した後、これは私にとってはうまくいきました：

$(window).unbind('.infscr');

ドキュメントの 1/4 を参照してください: http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

于 2014-01-21T01:43:47.700 に答える
3

ここでは言及されていませんが、(私のバージョンの Infinite Scroll ではとにかく) InfiniteScroll の再インスタンス化を機能させるには、2 つの変数も設定する必要があります。また、再バインドする必要があります。コードは次のとおりです。

$('#cardContainer').infinitescroll('destroy'); // Destroy

// Undestroy
$('#myContainer').infinitescroll({                      
    state: {                                              
        isDestroyed: false,
        isDone: false                           
}
});

InitInfiniteScroll(); // This is a wrapper for the standard initialization you need

// Re-initialize
$('#myContainer').infinitescroll('bind');
于 2012-03-21T16:46:45.023 に答える
2

私のコードは、カウンターに頼るのではなく、ユーザーのアクションに応じて宛先 URL を更新するため、同様のことをしなければなりませんでした。

$container('reset'); を使用して呼び出すことができる次のリセット メソッドを実装することになりました。

reset: function infrscr_reset() {
        this.options.state.isDone = false;
        this.options.state.isDuringAjax = false; // I needed this, others may not
        this._resetmsg();
        this._binding('bind');
    },

また、ホバー メッセージをリセットするためのプライベート メソッドも実装しました。

_resetmsg: function infscr_resetmsg() {
        var opts = this.options;
        opts.loading.msg = $('<div id="infscr-loading"><img alt="Loading..." src="' + opts.loading.img + '" /><div>' + opts.loading.msgText + '</div></div>');
        this._debug('Reset loading message');
    },
于 2012-05-17T21:44:02.930 に答える
1

次のような無限スクロールを作成したと仮定します。

//This will initiate with default values for example purpose
$("#myelement").infinitescroll();

次に、インスタンスを完全に破棄することはできませんでした:

$("#myelement").infinitescroll("destroy");
//Reset anything else that may cause the page to blow up here
//And then create a new instance with different path variables:
//Note, obviously you'll be initializing it with custom selectors/settings etc so include those as well
$("#myelement").infinitescroll({pathParse:["/ajax/getCoworkings/?page=","&latitude=52.5234051&longitude=13.4113999&distance=12"]});

基本的に、pathParse を定義しない場合、スクリプトはそれ自体を解決しようとします。そうする場合、それはあなたが提供したものを使用します。それはあまりエレガントではなく、何よりもハックですが、現時点では pathParse の変更は厳密には無限スクロールでサポートされていません。

于 2011-10-29T12:10:52.263 に答える
1

項目 3)

if (xhr == 'destroy') {
    $.removeData(this.element[0]);

}

うまくいきませんでした。少なくとも最新バージョンでは。石積みは、「初期化の前に石積みのメソッドを呼び出すことはできません。メソッド「リロード」を呼び出そうとしました

$container.css('display','none');
$container.html(htmlOutput).imagesLoaded( function(){
             $container.css('display','block');
             $container.masonry('reload');
});

// I have to do this in order to "reset" the stage
$container.infinitescroll('destroy'); // Destroy

// Undestroy
$container.infinitescroll({                      
   state: {
      isDestroyed: false,
      isDone: false
   }
});

// Init.
$container.infinitescroll({
   navSelector  : '#page-nav',    // selector for the paged navigation 
   nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
   itemSelector : '.tile',     // selector for all items you'll retrieve
   loading: {
     finishedMsg: '',
     msgText: '',
     img: url + 'img/ajax-loader.gif'
   }
},
// trigger Masonry as a callback
function( newElements ) {
    // hide new items while they are loading
    var $newElems = $( newElements ).css({ opacity: 0 });
    // ensure that images load before adding to masonry layout
    $newElems.imagesLoaded(function(){
        // show elems now they're ready
        $newElems.animate({ opacity: 1 });
        $container.append($newElems).masonry('appended', $newElems, true); 
    });
 }
);

// Re-initialize
$container.infinitescroll('bind');
于 2012-05-11T02:37:38.853 に答える
0

これを行うには、次のコードを無限スクロール宣言に追加するだけです。

errorCallback : function() {
    isc.getContainer().infinitescroll('destroy');
    $.removeData(this);
},

ininfinitescroll.js ファイルではなく、カスタムの無限スクロール宣言にあることに注意してください。

于 2014-01-13T08:26:08.343 に答える