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

Question

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

当我提交表单时（基本上，进行ajax调用），默认光标变为等待光标（沙漏），当ajax调用完成时（响应），光标变为默认类型（箭头）。然而，这只适用于IE和FF。在Chrome中，光标仍然是沙漏形光标，直到我移动光标或发出警报等。

我尝试了一个很像这里提到的解决方案，它使用Jquery的Ajax停止和启动事件来触发操作，但由于某种原因，它对我不起作用

下面是我的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');
        });
});

Answer 2

从jquery 1.9开始，您应该将它们附加到文档中。

// Makes the mousecursor show busy during ajax 
// 
$( document )
   .ajaxStart( function startBusy() { $( 'html' ).addClass   ( 'busy' ) } )     
   .ajaxStop ( function stopBusy () { $( 'html' ).removeClass( 'busy' ) } )