[英]Executing infinite scroll on dynamically created content
我有一个页面使用MySQL数据库加载内容。 用户可以使用几个按钮过滤内容,然后使用jQuery将其替换为动态提取的数据。 同样,我在无限滚动中使用的链接也会更改。 但是无限滚动插件似乎只使用相同的旧链接,而不是新加载的链接来触发滚动。
我使用的jQuery Infinity滚动插件
https://cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.1.0/jquery.infinitescroll.js
这是我的代码
<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){
});
我正在从更改滚动触发链接
<nav id="page-nav"><a href="myposts.php?page=2"></a></nav>
至
<nav id="page-nav"><a href="getposts.php?page=2"></a></nav>
但是插件仍然采用旧链接来触发滚动。 有什么解决办法吗? 感谢您的时间。
您可以侦听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' )
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.