jQuery - Click event on div but not on checkbox in the div

Question

I'm trying to setup a click event on a div, and I would like that event to fire if that div is clicked anywhere except a checkbox in the div. If the checkbox is clicked, I do not want the div's click event to fire. I setup a click event on the checkbox and returned false, which stops the div's click event, but does not allow the checkbox to become checked either. Here's what I have now:

$('.theDiv').click(function() {
    // Click event for the div, I'm slide toggling something
    $('.sub-div', $(this)).slideToggle();
});

$('.checkboxInTheDiv').click(function() {
    // Do stuff for the checkbox click, but dont fire event above
    return false; // returning false won't check/uncheck the box when clicked
})

tvanfosson · Accepted Answer · 2010-01-11 18:01:52Z

15

Instead of returning false, which prevents the default action, try just stopping propagation.

$('.checkboxInTheDiv').click( function(e) {
    e.stopPropagation();
    ... other stuff...
    return true;
});

answered Jan 11, 2010 at 18:01

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

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

2 Comments

Jon Bristow Over a year ago

here's a good way to do the above: quirksmode.org/js/events_order.html

Jacob Raccuia Over a year ago

amazing. I was struggling with rewriting my html for a while. thanks!

Topher Fangio · Accepted Answer · 2010-01-11 18:03:13Z

3

You'll need to look at the event object passed into the click handler and see what type it is. Look at the Event.Type documentation for more information.

function handler(event) {
  var $target = $(event.target);
  if( $target.is("li") ) {
    $target.children().toggle();
  }
}

$("ul").click(handler).find("li > ").h

Note: Code copied from linked URL.

answered Jan 11, 2010 at 18:03

Topher Fangio

20.7k15 gold badges64 silver badges94 bronze badges

1 Comment

Josh Anderson Over a year ago

This answer is especially useful since it works even when the event is bound using the .live() method.

Ariel · Accepted Answer · 2010-01-11 18:03:15Z

0

Try a simple return;

answered Jan 11, 2010 at 18:03

Ariel

4,5102 gold badges24 silver badges23 bronze badges

Collectives™ on Stack Overflow

jQuery - Click event on div but not on checkbox in the div

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related