JQuery函数没有在文档加载时执行

Question

我正在尝试构建一个简单的社交媒体网站，其中人们可以发布帖子并对帖子发表评论（有点像Facebook）。为了获取帖子和评论，我创建了两个简单的PHP脚本，以json格式获得结果。然后我在jquery中创建了两个函数，分别为getPosts()和getComments()以ajax的结果。成功时，这些函数clone()我为已返回的每个帖子/评论对象创建的html框架。

这里是我的HTML框架： -

<div class="KK-posts_feed"> 

      <div class="KK-post_frame" style="display:none;"> //This is the div that I clone() for postings 

       <div class="KK-post_info_header"> 
         <a class="KK-post_username"></a>  
        </div> 
       </div> 

       <div class="KK-post_text"></div> 

       <div class="KK-post_comment_thread" data-PID=""> 
        <div class="KK-post_comment_box"> //This is the div that I clone for comments 

         <div class="KK-post_comment_user_info"> 
          <a class="KK-post_comment_username"></a> 
         </div> 
         <div class="KK-post_comment_text"></div> 
        </div> 
       </div> 
      </div> 
     </div> 

这是getPosts()方法输出的职位： -

function getPosts(){ //This function gets the posts and clones the html for each post 
     $.ajax({ 
     type : 'GET', 
     url : 'fetchposts.php', 
     dataType: 'json', 
     error : function(){ 
      $('.dash_results_bar').html('<p class="KK-post_load_error">' + "Sorry, couldn't load posts at the moment. This maybe because we are facing downtime or because the databases are being updated." + ' <a href="#" class="KK-post_load_retry">Retry</a>' + "</p>"); 
     }, 
     success : function(data) 
     { 
     var posts = data.posts; 

      if(posts.length) 
      { 
       $('.KK-post_frame:first').css("display", "block"); 
       $(posts).each(function(index, value){ 
        $('.KK-post_frame:first') 
        .clone(true) 
        .attr('id', (value.post_id)) 
        .find('.KK-post_username').html(value.user_fullname) 
        .end() 
        .find('.KK-post_text').html(value.post_text) 
        .end() 
        .find('.KK-post_comment_thread').attr('data-PID', value.post_id) 
        .end() 
        .appendTo('.KK-posts_feed'); 
       }); 
       $('.KK-post_frame:first').css("display", "none"); 
      } 
     } 
    }); 
} 

这是getComments()方法输出下的每个岗位的评论： -

function getComments(){ 
     $('.KK-post_comment_thread').each(function(){ // I run this method for each comment thread div inside each of my posts div 
     var pid = $(this).attr('data-PID'); // PID is the 'post id' that I use, to identify each comment thread div separately. 
     var self = this; 
     $.ajax({ 
      type : 'POST', 
      url : 'fetchcomments.php', 
      data : 'pid='+pid, // I send the post id to the php script which returns the comments for the particular post in the form of json objects 
      error : function(){ 
       $(self).html('<p class="KK-post_comment_load_error">' + "Sorry, couldn't load comments at the moment." + ' <a class="KK-post_comment_load_retry" href="#">Retry</a>' + "</p>"); 
      }, 
      success : function(data){ 
       var comments = data.comments; 

       if(comments.length) 
       { 
        $('.KK-post_comment_box:first').css('display', 'block'); 
        $(comments).each(function(index, value){ 
         $('.KK-post_comment_box:first') 
         .clone(true) 
         .attr('id', value.comment_id) 
         .find('.KK-post_comment_username').html(value.user_fullname) 
         .end() 
         .find('.KK-post_comment_text').html(value.comment_text) 
         .end() 
         .appendTo(self); 
        }); 
        $('.KK-post_comment_box:first').css('display', 'none'); 
       } 
      } 
     }); 

    }); 
} 

这是我如何执行上述两个功能： -

$('document').ready(function(){ 

    $.when(getPosts()).done(function(){ 

      getComments(); 
    }); 

}); 

虽然getPosts()方法执行完美并输出该讯息，该方法getComments()要么不执行或不显示出任何效果。我无法确定地说，因为每次刷新页面时，我只会收到帖子，而不是评论。我也检查了我的控制台，但没有发现脚本的任何错误。当我通过点击事件处理程序（如$('button').click(function(){ getComments(); });）执行它时，getComments()方法运行得非常好。因此，我知道我的两个方法工作正常，只是我无法在页面加载时一个接一个地执行它们。有人能帮助我解决这个奇怪的问题吗？

Answer 1

您的getPosts()函数不会返回任何内容，所以您将undefined传递给$.when()。

您需要返回从什么$.ajax()返回'S：

function getPosts(){ //This function gets the posts and clones the html for each post 
    return $.ajax({ 
     // ...