javascript - ページが更新されるまで最初のページは空白

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