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({ 
     // ...