基本上,当我点击第一页并单击按钮时,它应该显示前 2 个动态帖子。不幸的是,直到我在前 2 个帖子出现之前点击浏览器上的刷新按钮,才会显示任何帖子。
我花了几个小时试图弄清楚我在这段代码中缺少什么:
$(document).ready( function () {
var data = $.getJSON("http://howtodeployit.com/category/daily-devotion/feed/?json=recentstories", function(data) {
var $postsList = $('#postlist'),
$loadMore = $postsList.parent().find('.load-more'),
currentPage = 0,
postsPerPage = 2;
var showMorePosts = function () {
var offset = currentPage * postsPerPage,
posts = data.posts.slice(offset, offset + postsPerPage);
$.each(posts, function ( i, val ) {
$('<li/>').append([$("<h3>", {html: val.title}),$("<p>", {html: val.excerpt})]).wrapInner('<a href="#devotionpost" onclick="showPost(' + val.id + ')"></a>').appendTo($postsList);
});
if( posts.length !== postsPerPage ) {
$loadMore.hide();
}
currentPage++;
$postsList.listview('refresh');
};
$postsList.listview();
showMorePosts();
$loadMore.on('click', showMorePosts);
});
});
HTML:
<!-- Page: home -->
<div id="home" data-role="page" data-theme="d" data-title="My Devotion">
<div data-role="listview">
<a href="#devotion" id="devotionclick" data-role="button">Daily Devotional Messages</a>
</div><!-- links -->
</div><!-- page -->
<!-- Page: Daily Devotional Messages -->
<div id="devotion" data-role="page" data-title="My Devotion">
<div data-role="header" data-theme="a" data-position="fixed"> <h2>Daily Devotional Messages</h2></div><!-- header -->
<ul data-theme="d" id="postlist"> </ul><!-- content -->
<div class="load-more">Load More Posts...</div>
</div><!-- page -->
也看到这个错误:
Uncaught TypeError: Cannot read property 'jQuery1101005234554712660611' of undefined