javascript - 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

我稍微更改了代码，使其适用于 JS Fiddle。

这是一个小提琴：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");
    }
   });
});

Answer 2

我认为你应该更正 .appendTo('#postList'); => .appendTo('#postlist'); 应该没问题 jquery 选择器区分大小写