動的に作成されたコンテンツに無限スクロールを実行する

Question

私はMySQLデータベースを使用してコンテンツを読み込むページを持っています。また、ユーザーは少数のボタンを使用してコンテンツをフィルタリングでき、このコンテンツはjQueryを使用して動的にプルされたデータに置き換えられます。また、無限のスクロールで使用するリンクも変更されます。しかし、無限のスクロールプラグインは、同じ旧式のリンクのみを使用し、新しくロードされたリンクはスクロールしないように見えます。

私はこれは私が

<nav id="page-nav"><a href="myposts.php?page=2"></a></nav> 

から

までスクロールトリガリンクを変更しています私のコード

<div class="container" id="myposts"> 
<div class=”post”> 
<p>my content</p> 
</div> 
</div> 

<nav id="page-nav"><a href="myposts.php?page=2"></a></nav> 

//jQuery code 
$('#myposts').infinitescroll({ 
    navSelector : '#page-nav', // selector for the paged navigation 
     nextSelector : '#page-nav a', // selector for the NEXT link (to page 2) 
     itemSelector : '. post ',  // 
     loading: { 
         finishedMsg: 'End of the page', 
         img: 'images/loader.gif' 
    } 
    }, function(newElements, data, url){ 

}); 

ある

https://cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.1.0/jquery.infinitescroll.js

を使用

jQueryの無限スクロールプラグイン

しかし、プラグインは依然としてスクロールを開始するために古いリンクを使用します。これにはどんな解決策がありますか？あなたの時間を感謝します。

Answer 1

イベントappend.infiniteScrollを聞いて、ページからリンクを更新できます。
https://infinite-scroll.com/events.html#append
https://infinite-scroll.com/api.html#option

このような何か：

$container.on('append.infiniteScroll', function(event, response, path, items) { 
    $container.infiniteScroll('nextSelector', '#page-nav a') 
});