在jQueryMobile框架中从页面导航到新页面时，我无法理解无限滚动插件（Paul Irish）出了什么问题。
当页面重新加载时，一切正常，我在滚动时将下一页注入到DOM中，当从导出菜单“+摄影”导航到“编辑”部分时，我得到了无限滚动插件“进入ajax”加载错误的页面和正确的页面。这会导致错误并且无限滚动到页面。
这是陷入困境的网站http://www.elisabettaclaudio.com
这是控制台日志：
["heading into ajax", Array[2] ] jquery.infinitescroll.js:183
["Using HTML via .load() method"] jquery.infinitescroll.js:183
["heading into ajax", Array[2] ] jquery.infinitescroll.js:183
["Using HTML via .load() method"]
XHR finished loading: "http://www.elisabettaclaudio.com/editorials/?pg=2".
["contentSelector", <div class="mas masonry" style="position: relative; height: 448.79999923706055px; ">…</div> ] jquery.infinitescroll.js:183
XHR finished loading: "http://www.elisabettaclaudio.com/editorials/?pg=4". jquery-1.7.1.min.js:4
["Error", "end"] jquery.infinitescroll.js:183
["Binding", "unbind"]
无法解决导致此问题的原因在禁用jqm ajax导航时，一切都按预期工作。
这是javascript
// Remove Default section
$('.type-home').live('pagehide', function(){
$(this).remove();
});
// Remove InfiniteScroll from previous section
$('.type-home').live('pagebeforehide', function(){
$('.mas').infinitescroll('destroy');
});
// Bind InfiniteScroll to next section
$('.type-home').live('pagebeforeshow', function(){
$('.mas').infinitescroll('bind');
});
$(document).bind('pageshow', function() {
if($('.mas').length){
// Masonry
var $wall = $('.mas');
// Ensure that images load before executing Masonry
$wall.imagesLoaded(function(){
$wall.masonry({
itemSelector: '.set',
isAnimated: false,
animationOptions: {
duration: 100,
easing: 'linear',
queue: false
}
});
// Show itemSelector
var sequenza = $('.set'), i = 0;
(function(){
$(sequenza[i++] || []).animate({opacity: 1}, 100, arguments.callee);
})();
$wall.infinitescroll({
state: {
isDuringAjax: false,
isInvalidPage: false,
isDestroyed: false,
isDone: false,
isPaused: false,
currPage: 1
},
navSelector : '.nav-selector a', // selector for the paged navigation
nextSelector : '.nav-selector a', // selector for the NEXT link (to page 2)
itemSelector : ".set",
contentSelector: ".mas",
loadingImg : 'css/themes/default/images/ajax-loader.png',
donetext : 'No more to load.',
animate : false,
behaviour : 'masonry-isotope',
bufferPx : 10,
extraScrollPx: 0,
debug : true,
dataType: 'html+callback',
appendCallback: true,
errorCallback : function() {
//fade out the error message after 2 seconds
$('#infscr-loading').animate({opacity: .18}, 2000).fadeOut('slow');
}
},
// call masonry as a callback.
function(newElements) {
// Define new elements
var $newElems = $(newElements);
$($newElems).animate({opacity: 0}, 0);
// Ensure that images load before exectuing Masonry
$newElems.imagesLoaded(function(){
// initialise Masonry for method 'appended' soon after
$wall.masonry();
// Use the append method will position only th new added elements
$wall.masonry('appended', $newElems, true );
// Fade in new elements in linear sequence
var sequenzaNew = $newElems, i = 0;
(function() {
$(sequenzaNew[i++] || []).animate({opacity: 1}, 100,
arguments.callee);
})();
});
});
// Check window height against document height and force loading
setInterval(function(){
var windowHeight = $(window).height();
var docHeight = $(document).height();
if(windowHeight >= docHeight){
$wall.infinitescroll('retrieve', console.log('Force retrieve infinite scroll'));
} else if(windowHeight < docHeight) {
console.log('Now wait for a scoll');
};
}, 2000);
});
};
});