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

AJAX 的 $(document).ready 等价于 ajaxComplete .所以这是代码:

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

感谢@usman 在这里的回答Document Ready equivalent for ajax-loaded content via jQuery Mobile accordion