使用AjaxStop事件(在Chrome中)完成ajax调用后,将等待光标更改为默认(自动)

Question

我遇到了这个问题,从一些谷歌搜索我意识到这可能是Chrome和Safari浏览器中的一个错误.

当我提交表单(基本上,进行ajax调用)时,默认光标变为等待光标(沙漏),当ajax调用完成(响应)时,光标变为默认类型(箭头).但是,这仅适用于IE和FF.在Chrome中,光标仍然是沙漏光标,直到我执行诸如移动光标或发出警报等操作.

我尝试了一个类似于这里提到的解决方案,它使用Jquery的Ajax Stop和Start事件来触发操作,但由于某种原因它对我不起作用.

下面是我的jsp/html代码.

function SubmitForm()
{
    globalAjaxCursorChange(); 
    // some code to make Ajax call
}

function globalAjaxCursorChange()   
{  
    $("html").bind("ajaxStart", function(){  
        $(this).addClass('busy');  
    }).bind("ajaxStop", function(){  
        $(this).removeClass('busy');  
    });  
}

这是我的CSS代码.

html.busy, html.busy * {  
    cursor: wait !important;  
}  

我错过了什么或我错在哪里？文章中提到的解决方案对我来说似乎非常直接,但不起作用.非常感谢任何建议.

Answer 1

我不确定为什么这些.bind变体不起作用，但是当我在谷歌上搜索“jquery bind ajaxStart”时，这是第一个搜索结果。

因此，只需进行最微小的更改（即更改.bind("ajaxStart",为.ajaxStart(并与 相同ajaxStop），我就可以让您的代码正常工作，如下所示：

$(document).ready(function() {
    // Global ajax cursor change
    $("html")
        .ajaxStart(function () {
            $(this).addClass('busy');
        })
        .ajaxStop(function () {
            $(this).removeClass('busy');
        });
});