加载 gif 绑定到 ajaxSend 事件，不起作用

Question

我正在尝试让我的 ajax 加载 gif 工作。 Ajax 工作正常。但它似乎不会触发显示微调器来显示。

这是我的 DIV 和我的 CSS。我知道这可以正常显示，因为我已经在没有“显示：无”的情况下对其进行了测试。

<div id="spinner" class="spinner" style="display:none;"></div>

.spinner {
    background: url('images/spinner.gif') !important;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -16px; /* half width of the spinner gif */
    margin-top: -16px; /* half height of the spinner gif */
    text-align:center;
    z-index:1234;
    overflow: auto;
    width: 32px; /* width of the spinner gif */
    height: 34px; /*hight of the spinner gif +2px to fix IE8 issue */
}

这是我的 JavaScript。注意“绑定”到“ajaxSend”。 虽然 ajax 调用在我的页面上正常工作，但它不会触发微调器显示。它也不会触发 alert()。

$(document).ready(function() {

    $("#spinner").bind("ajaxSend", function() {
        alert('triggered'); //This does not seem to trigger
        $(this).show();    // This does not seem to trigger
    }).bind("ajaxStop", function() {
        $(this).hide();
    }).bind("ajaxError", function() {
        $(this).hide();
    });

 $("#confirmbutton").on("click", function(event) {

        event.preventDefault();

        $.post( "/bm/form/save", $( ".form" ).serialize(), function() {

        })
            .done(function(data) {
                //do stuff
                alert( "done" );

            })
            .fail(function() {
                alert( "There was a problem saving!" );
            })
            .always(function() {
                alert( "finished (always)" );
        });


    });

Answer 1

试试这个

$( document ).ajaxSend(function() {
  alert("foo");
});