jquery - Ajax 加载图标未在 Ajax 功能上显示 - Codeigniter

Question

由于某种原因，我的 Ajax 加载器图标没有按应有的方式显示和隐藏。这是我处理 ajax 调用的 jQuery 代码片段。我可以使用 Chrome 的开发工具看到 #loading DIV...问题在于 jQuery 没有显示 DIV(div 本身的内联样式设置为 display:none)。如果我删除该内联样式，它会显示在应该的位置...

我这里缺少什么吗？

//website URL grab - Ajax call
$('.loadBTN').on("click", function(){

    var check_url = $('#web_address').val();

    if (!check_url || check_url == 'http://') { // form validation
        //alert('Please enter valid URL');
        // Do nothing
        return false;
    };

    var web_url = {
        url: $('#web_address').val(),
        ajax: '1' // needed for controller, to verify that request is ajax
    };         

    //display ajax loader animation
    $('#loading').show();

    $.ajax({
        url: 'ajax/web_embed',
        type: 'POST',
        data: web_url,
        success: function(msg) {
            $('#ajaxContent').html(msg); // output success in this container
            $('#loading').hide();
        } 
    });        


    return false;
}); 

Answer 1

我建议订阅所有 ajax 启动/停止事件，无论谁负责:

$("#loading")
    .ajaxStart(function(){ $(this).show(); })
    .ajaxStop(function(){ $(this).hide(); });

有ajax请求时就会显示加载，没有ajax请求时隐藏...

参见http://api.jquery.com/ajaxStart/