各位好,小妹最近使用infinite-scroll插件遇到一點問題,當scroll到第二頁的時候,append的頁面中ajax會失效,參照了官方文件沒找到什麼可用資源,這邊想來請教一下各位前輩們的意見。
頁面結構如下:append出來的頁面會用<article>
包住,page2有一組ul的li是用ajax產出。
<div class="article-feed" data-infinite-scroll="{ "path": ".pagination__next", "append": ".article", "status": ".scroller-status", "hideNav": ".pagination" }">
<article class="article">
//page1內容
</article>
<article class="article">
//page2內容(append內容)
<ul class="latesNews"></ul>
</article>
</div>
ajax的代碼如下:就是從json撈一些資料印出來,在其他頁面都能順利印出,唯獨在infinite-scroll append出來的頁面沒辦法作用,console也沒跳錯誤。
$.ajax({
url: "http://xxxxx/api/aall.json",
dataType:'json',
type: 'GET',
data: "data",
cache: false,
ifModified: true,
success: function getData(data){
// console.log(data.ClassItem.NewsItems);
var str = '';
var List = $('.latesNews');
for(var i=0; i<10;i++){
// var kindName = data.NewsItems[i].kindName;
var title = data.ClassItem.NewsItems[i].HeadLine;
var url = data.NewsItems[i].url;
var time = data.ClassItem.NewsItems[i].UpdateTime.substring(10);
if(title.length>25){
title = title.substring(0,25)+'...';
}
str += '<li><a href="'
+ url +'" target="_blank"><div><span class="time">'
+ time +'</span></div><div class="title">'
+ title +'</div></a></li>'
}
List.html(str);
},
error: function(result){ console.log('error'); }
});
infinite-scroll的代碼:infinite-scroll也是可以正常作用,並將一些function包進append.infiniteScroll
中(官方建議作法)但是小妹將ajax的代碼整串包進去,還是無法作用。
$('.article-feed').infiniteScroll({
// options
path: '.pagination__next',
append: '.post',
history: false,
});
$('.article-feed').on('append.infiniteScroll',function(){
videoResize();
youtubeFun();
SideBoxFun();
});
還請各位前輩們指點迷津,謝謝!