jquery - Using ajax global event to show loading image -

i have bit of problem showing loading image ajax calls in application.

this way tried (unsuccessfully)

front:

    <img src="~/images/ajax-progress.gif" alt="" class="hide" id="ajaxprogress"/> 

css:

.hide{     display:none !importent; } 

javascript:

$(function () {  $('#ajaxprogress').bind('ajaxstart', function () {     $(this).show(); }).bind('ajaxstop', function () {     $(this).hide(); }); 

});

when ajax call being made, image not shown.

why?

you can use - custom namespace

$(document).bind("ajaxstart.mine", function() {    $('#ajaxprogress').removeclass('hide'); });  $(document).bind("ajaxstop.mine", function() {     $('#ajaxprogress').addclass('hide'); }); 

or can use this

$(document)     .ajaxstart(function(){         $('#ajaxprogress').removeclass('hide');     })     .ajaxstop(function(){         $('#ajaxprogress').addclass('hide');     });