document.ready（）等效於AJAX加載的內容

Question

我有一個AJAX調用，它將嵌套的div（類.song_block）添加到頁面上的div（#song_list）。我有一個按鈕，我想隱藏一旦嵌套div的數量達到一定數量。

這裏是我的腳本

<script type="text/javascript"> 
    $(document).ready(function() { 
     if($("#song_list").find('.song_block').length == 100){ 
      $('#loadmore').hide(); 
     }  
    }); 
</script> 

這裏是AJAX調用

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#loadmore').on('click', function() { 
      $('#loadmore').hide(); 
      $('#loadmore-gif').show(); 
      $.ajax({ 
       type: "GET", 
       url: "/loadmore/", 
       data: { 
        'slug': $('.dj_slug').text().trim(), 
        'song_rank': $("#song_list").find('.song_block').length 
       }, 
      }).done(function (response) { 
       $('#song_list').append(response); 
       $('#loadmore').show(); 
       $('#loadmore-gif').hide(); 
      }); 
     }); 
    }); 
</script> 

現在，這並不因爲$(document).ready()工作，不工作的AJAX加載的內容。我該如何處理這種使用JavaScript的情況？

Answer 1

創建功能

function hideLoadMore() { 
    if($("#song_list").find('.song_block').length == 100){ 
     $('#loadmore').hide(); 
    } 
} 

而且使用DOM被加載時，當相關的Ajax請求完成

$(hideLoadMore); 

$(function() { 
    $('#loadmore').click(function(){ 
     $.ajax(...).done(/*perform dom insertion*/).done(hideLoadMore); 
    }); 
}); 

Answer 2

相當於$(document).ready爲AJAX是ajaxComplete。 所以這裏是代碼：

$(document).ajaxComplete(function(){ 
    //your code here 
}); 

由於@usman在這裏Document Ready equivalent for ajax-loaded content via jQuery Mobile accordion