Freeze operations while current finishes using jQuery

I have list of links, like:

<div class="links">
<a href="#" class="link1">link 1</a>
<a href="#" class="link2">link 2</a>
<a href="#" class="link3">link 3</a>
</div>

When you click on some link, it开发者_如何学Python loads some content to the block <div class="content"></div>

Content requested by ajax, so it can't be made immediately.

How do I freeze clicks (they should not work) inside block .links, while ajax query is not finished?

The plugin for jQuery that i use it Block UI. You can block the whole page or just an element. I do something like this.

$.ajaxStart({
    $.blockUI({message: 'Please wait...'});
    //this will block any element with the class links
    //$('.links').blockUI({message: 'Please wait...'});
});

$.ajaxStop({
    $.unblockUI();
});

Block UI has lots of demos for you to look at and lots of configurations to make. So you can make it look how you like. It works on all browsers.

Try toggling the css property pointer-events more info on its usage here.