JQuery - Click event on div, but not on checkbox in div

Question

I am trying to set a click event on a div, and I would like this event to fire if that div is clicked anywhere other than the checkbox in the div. If this check box is clicked, I do not want the event to be fired with a mouse click. I set the click event of the checkbox and returns false, which stops the click event of the div, but does not allow the checkbox to be checked as well. Here is 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 }) 

Answer 1

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

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

Answer 2

You need to look at the event object passed to the click handler and see what type it is. See the Event.Type documentation for more details .

 function handler(event) { var $target = $(event.target); if( $target.is("li") ) { $target.children().toggle(); } } $("ul").click(handler).find("li > ").h 

Note. The code is copied from the linked URL.

Answer 3

Try a simple return;