[jQuery] ajaxStart() ajaxStop() problem

[Jedrin]

I have a page that has ajaxStart/stop as shown below to show some sort
of indicator while an ajax request is in progress. The first time an
ajax event happens, it works perfectly, the server renders some text
on the page. After that it stops working on subsequent ajax requests.
I don't see any javascript errors. Am I dong something wrong or how
could I troubleshoot ? thanks


<div id='loading' style='display:none'>
 Loading ..
</div>

..
..

<script type="text/javascript">

$(document).ready(function(){
$("#loading").ajaxStart(function(){
  $(this).show();
});
});

$(document).ready(function(){
$("#loading").ajaxStop(function(){
  $(this).hide();
});
});

</script>