Измените курсор ожидания на значение по умолчанию (авто) после завершения вызова ajax с помощью события AjaxStop (в Chrome)

Question

Я столкнулся с этой проблемой и по поиску в Google понял, что это, вероятно, ошибка в браузерах Chrome и Safari.

Когда я отправляю форму (в основном, выполняю вызов ajax), курсор по умолчанию меняется на курсор ожидания (песочные часы), а когда вызов ajax завершается (ответ), курсор меняется на тип по умолчанию (стрелка). Однако это хорошо работает только в IE и FF. В Chrome курсор все еще остается курсором песочных часов, пока я не сделаю что-то вроде перемещения курсора или предупреждения и т. Д.

Я попробовал решение, очень похожее на упомянутое здесь , которое использует событие Ajax Stop и Start Jquery для запуска действий, но по какой-то причине оно не работает для меня.

Ниже мой код 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' ) } )