Question

here’s what I have:

$(document).ready(function(){
    //stuff
}).ajaxSend(function() {
    $('.overlay').show();
}).ajaxStop(function() {
    $('.overlay').fadeOut();
});

The problem I am having is that the first time I trigger an ajax action it works perfectly, but not any time after that. I have to reload the page for the ajaxSend/Stop to work again. So say I load a page, click ‘load more’ to ajax load content, the overlay shows up no problem. but then I click it a second time, everything works fine except the modal doesn’t show up this time or any time after.

any ideas?

Answer 1

$(document).ready will only be called once – when the DOM is loaded. This won’t work when loading data via ajax.

Two options:

First, if you can identify the div using its id that you are loading as part of your ajax page load, then you can do (edited):

$('.overlay').ajaxSend(function() { 
                                       $(this).show(); });
$('.overlay').ajaxStop(function() { 
                                       $(this).fadeOut(); });

Alternatively, you could forego ajaxStart and ajaxStop altogether, and trigger them as you click the “Load More” link e.g. something like:

$("a").click(function(){
   var url = $(this).attr('href');
   $(".overlay").show("fast", function(){
       $("#targetdiv").load(url + " #div_id", {}, function(){
          $(".overlay").fadeOut();
       })
   })
   return false;
});