Question

Possible Duplicate:
Prevent click event from affecting parent jquery

I have a DOM structure similar to this:

<div class="parent">
   <div class="child">

   </div>
</div>

I have the following jQuery:

$('.parent').click(function(){
    $(this).hide();
});

When .child is clicked I don’t want the parent to hide but obviously because .child is a child of .parent this naturally happens. I’ve tried adding this:

$('.child').click(function(e){
    e.stopPropagation();
});

But it still doesn’t work. I’ve also tried replacing e.stopPropagation with return false;

any suggestions?

JSFiddle

Answer 1

This definitely works see my fiddle of your code. Try clicking the green div. If it does not work on your site, you have another issue.