JSON數據未加載到內容頁面

Question

我試圖將我的JSON數據追加到內容頁面，但數據未加載。當我使用console.log時，我可以看到顯示的數據。

JS：

$(document).on('pagebeforeshow', '#blogposts', function() {  
//$.mobile.showPageLoadingMsg();  
    $.ajax({ 
    url: "http://howtodeployit.com/category/daily-devotion/?json=recentstories&callback=", 
    dataType: "json", 
    jsonpCallback: 'successCallback', 
    async: true, 
    beforeSend: function() { $.mobile.showPageLoadingMsg(true); }, 
    complete: function() { $.mobile.hidePageLoadingMsg(); }, 
    success:function(data){ 
     $.each(data.posts, function(i, val) { 
    console.log(val.title); 
    $('<li/>').append([$("<h3>", {html: val.title}),$("<p>", {html: val.excerpt})]).wrapInner('<a href="#devotionpost" onclick="showPost(' + val.id + ')"></a>').appendTo('#postList'); 
    return (i !== 4); 
     console.log('#postlist'); 
     }); 
     }, 
    error: function(data) { 
     alert("Data not found"); 
    } 
    }); 
}); 

HTML：

<!-- Page: Blog Posts --> 
    <div id="blogposts" data-role="page"> 
     <div data-role="header" data-position="fixed"> 
      <h2>My Blog Posts</h2> 
     </div><!-- header --> 
     <div data-role="content"> 
      <ul id="postlist"> </ul><!-- content --> 
     </div> 
     <div class="load-more">Load More Posts...</div> 
    </div><!-- page --> 

Answer 1

我認爲你應該糾正.appendTo（ '＃postList'）; => .appendTo（'＃postlist'）;它應該是好的jquery選擇器區分大小寫

Answer 2

我改變了一點，所以它適用於JS提琴的代碼。

這裏是一個小提琴： http://jsfiddle.net/rM7zh/

$(document).ready(function() {   
    $.ajax({ 
    url: "http://howtodeployit.com/category/daily-devotion/?json=recentstories&callback=", 
    dataType: "jsonp", 
    async: true, 
    success:function(data){ 
     $.each(data.posts.slice(0,4), function(i, val) { 
    console.log(val.title); 
    $('<li/>').append([$("<h3>", {html: val.title}),$("<p>", {html: val.excerpt})]).wrapInner('<a href="#devotionpost" onclick="showPost(' + val.id + ')"></a>').appendTo($('#postlist')); 
     }); 
     }, 
    error: function(data) { 
     alert("Data not found"); 
    } 
    }); 
});