Jquery abort ajax call from another event

I have two click events, one of them has an ajax call, for the sake of clairty this could be click event A. I have another click event, let call this click event B.

I noticed that if I keep clicking on A multiple times rapidly and then click on B the events gets queued up, and even after event B has carried out, the ajax from A will get called.

When I click on B I want all ajax calls to stop altogether that are carried out from A.

Inside click event A I have:

$("A").live("click", function(event) {
    var ajax_call = $.ajax({ /* Some code goes here */ });
});

$("B").live("click", function(event) {
    /* Some code go开发者_JAVA百科es here */
   ajax_call.abort();
});

But the above doesn't work. Is there a way where I can clear the backlog of events carried out from A?

The problem you are facing is probably related to the concept called closure. The variable from the first callback is not accessible from the second callback. The solution may be the following:

var ajax_call;

$("A").live("click", function(event) {
    ajax_call = $.ajax({ /* Some code goes here */ });
});

$("B").live("click", function(event) {
    /* Some code goes here */
    ajax_call.abort();
});

Does it work for you?

Seems like a scope issue. ajax_call should be accesible for both events:

var ajax_call;

$("A").live("click", function(event) {
    ajax_call = $.ajax({ /* Some code goes here */ });
});

$("B").live("click", function(event) {
    /* Some code goes here */
   ajax_call.abort();
});