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
– BaseZen, Commented Mar 7, 2015 at 19:26
You can use .off('click') - see this answer to a similar question. — fzzfzzfzz
– fzzfzzfzz, Commented Mar 7, 2015 at 19:26

ezaquarii · Accepted Answer · 2015-03-07 19:24:45Z

1

Try deactivating pointer events. Here is a CSS class:

.inactive {
    pointer-events: none;
}

answered Mar 7, 2015 at 19:24

ezaquarii

1,91613 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

charlietfl Over a year ago

note that this doesn't have broad browser support. Makes more sense to remove the event handlers

Petroff Over a year ago

Note: Not supported from mobile: developer.mozilla.org/en-US/docs/Web/CSS/…

mk117 Over a year ago

@Petroff: As per this link, it's supported on mobiles too!

Petroff Over a year ago

@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.

Léo Muniz · Accepted Answer · 2015-03-09 01:29:31Z

1

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.

answered Mar 9, 2015 at 1:29

Léo Muniz

6275 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to stop div from taking click events

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related