Question

基本上当我点击第一页并点击按钮时，它应显示前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

Answer 1

我注意到你没有添加回调参数“callback =？”到您的json请求网址，如果您的代码来自同一台服务器，则无关紧要。

另外，“＃postlist”为空，它不包含任何li元素， “$ postsList.listview（）;”时引发错误叫做。也许是因为你的ul是空的。

你可以检查元素“#postlist”以找到它

初始页空白，直到页面刷新

1 个答案: