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.

what about `.children().off()`? That's the actual opposite of `.on(...)` — BaseZen, Mar 07 '15 at 19:26
You can use `.off('click')` - see [this answer](http://stackoverflow.com/a/19320348/4318200) to a similar question. — fzzfzzfzz, Mar 07 '15 at 19:26

score 1 · Answer 1 · answered Mar 07 '15 at 19:24

1

Try deactivating pointer events. Here is a CSS class:

.inactive {
    pointer-events: none;
}

answered Mar 07 '15 at 19:24

ezaquarii

1,832
11
15

note that this doesn't have broad browser support. Makes more sense to remove the event handlers – charlietfl Mar 07 '15 at 19:28
1

Note: Not supported from mobile: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events#Browser_compatibility – Petroff Mar 07 '15 at 19:41
1

@Petroff: As per [this link](https://css-tricks.com/almanac/properties/p/pointer-events/), it's supported on mobiles too! – mk117 Mar 09 '15 at 02:11
1

@mk117 hmmm on `Mobile` tab `Basic support` is `"?"`. But thanks for the link. I have to test it by myself to be sure. +1 for your comment. – Petroff Mar 09 '15 at 12:29

score 1 · Answer 2 · answered Mar 09 '15 at 01:29

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.

How to stop div from taking click events

2 Answers2