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

$(document).ready的{{1}}相当于ajaxComplete。所以这是代码：

AJAX

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

Answer 2

创建一个功能

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);
    });
});

document.ready（）等效于AJAX加载的内容

2 个答案: