Question

I have a page with multiple links that each perform different AJAX calls and then dynamically insert some data in another area of the page. When the user clicks on any one of these links, I want to disable all the others until the data from the call comes back, so they can’t make multiple requests at once.

The links are all located in the same <div>, so I can easily target just all of those without touching other “regular” links elsewhere on the page.

What would be the best way to do this?

Answer 1

How about preventing the default behaviour on links that have class B, when something of class A is clicked?

HTML:

<a href="1" class="linkTypeA">Link</a>
<a href="2" class="linkTypeB">Link 2</a>
<a href="3" class="linkTypeB">Link 3</a>

Script:

$(document).on("click", "a.linkTypeA", function() {
   $('.linkTypeB').click(function(e) { e.preventDefault(); });
})

You’ll need to unbind the click event on linkTypeA when you want to allow clicks on linkTypeB to start working again.

$("a").unbind("click");

If you didn’t want to use classes, you could check the source element of the click and prevent the default behaviour on all tags other than the source element.