Question

i have this code to show a loading image when i run an ajax call:

$('.event').live('click', function () {
    var spinner = $("<img src='/content/images/ajax-loader.gif' />").insertAfter(this);

the issue is that since its an async call, if you click a link multiple times, it will show up with multiple spinners. Obviously this is just the sympton as i dont want to allow another ajax call before the first one returns.

What is the best way to “disable” a link or a button during the window of an existing ajax call?

Answer 1

Nice thing about .live() is that it is selector based.

Because the handler is triggered for elements with .event class, just change its class, and the handler won’t fire anymore.

$('.event').live('click', function () {
    $( this ).toggleClass( 'event event_clicked' );
    var spinner = $("<img src='/content/images/ajax-loader.gif' />").insertAfter(this);

This will remove the event class, and replace it with event_clicked, so subsequent clicks on the element won’t trigger the live() handler.

To restore functionality, just swap the classes again.