相当于AJAX加载内容的document.ready（）

Yin Yang 发表于 Dev

Yin Yang

我有一个AJAX调用，可将嵌套的div（带有class .song_block）添加到#song_list页面上的div（）。我有一个按钮，一旦嵌套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处理这种情况？

尤里·塔拉班波（Yury Tarabanko）

创建一个功能

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。