Question

How do I add a checkbox on top of a clickable element, that won’t send the click event to the clickable element?
(To generalize the question – add a non-clickable element on top of a clickable element)

Example here:
http://jsbin.com/uyecaq/4/edit

Thanks!

To Clarify – When the checkbox is clicked, the div that it sits in should not receive the click event.

Answer 1

You can try this..

$('.checkboxpart').click(function(event){
event.stopPropagation();
});

This one will bind a click on checkbox, overriding default action. The click on the div occurs due to Event propagation. So we need to stop that.

Hope this helps..:)