jquery ajaxStart not working

Question

If you click on the click here to order button here: http://www.game onglove.com/ gog/ test3.html, and then click the same button on the lightboxed window that pops up, an ajax request will run using $.post().

You can hit "continue shopping" to return to the previous lightboxed window to quickly start over.

If I execute the jquery code here in the console (chrome or firefox), then it works properly. It just won't work from where it is in the source code:

$('#cboxLoadingGraphic').ajaxStart(function() {
$(this).show();
$('#cboxLoadedContent').hide();
}).ajaxStop(function() {
$(this).hide();
$('#cboxLoadedContent').fadeIn('slow');
});

Why will it work from the console, but not in its current location in the source? How do I get this to work?

Answer 1

That element's getting created later, you have to bind after it's created, or a bit simpler just bind the handler to document from the start:

$(document).ajaxStart(function() {
  $('#cboxLoadingGraphic').show();
  $('#cboxLoadedContent').hide();
}).ajaxStop(function() {
  $('#cboxLoadingGraphic').hide();
  $('#cboxLoadedContent').fadeIn('slow');
});