How to stop div from taking click events

Question

I am struggling with a problem which I presumed to be easy. I have a parent div, and inside my parent div I have many divs. I have onclick events attached to all these divs.

Now I have to disable those divs from taking click events when user clicks on them when the page is loading data via asyn ajax call.

I tried to disable div by using following:

       $(".theme-container").children().attr('disabled', true)

Where "theme-container" is the class name of the parent div. Unfortunately it is not working, and I still can click on divs!

Some help would be greatly appreciated.

Answer 1

Try deactivating pointer events. Here is a CSS class:

.inactive {
    pointer-events: none;
}

Answer 2

You should use namespaces to bind and unbind events.

function myAttachedEvent (event){
    $(".myDivs").unbind("click.myClick"); // here you "disable" the click event

    // do everything else and when you get the response bind the event again:
    $(".myDivs").bind("click.myClick",myAttachedEvent);
});

$(".myDivs").bind("click.myClick", myAttachedEvent);

Take a look at the unbind Jquery documentation and look for "Using namespaces" section.