Jquery: block onclick div action when click in other object inside

Question

I have this situation: http://jsfiddle.net/Lm7ac/4/

$(".more").hide();

$(document).on("click", ".btn",function() { 
            alert("hello");     
});   

$(document).on("click", "div.post",function() {
     var morediv = $(this).find(".more");

     morediv.slideToggle('fast');
});

I need to keep ".more" closed(or open) when click in ".btn".

How can i do that?

Thanks

Answer 1

Use event.stopPropagation() :

$(document).on("click", ".btn",function(event) {
    event.stopPropagation();    
    alert("hello");     
}); 

...note the event argument to the callback, make sure to include it as above.

http://jsfiddle.net/KJ5Uv/

Cheers

Answer 2

Just return false at the end of the .btn click event handler.

$(document).on("click", ".btn",function() { 
            alert("hello");     
    return false;
});  

When you return false in a jQuery event handler it's like calling event.preventDefault() as well as event.stopPropagation() at the same time.

Here is a demo: http://jsfiddle.net/Lm7ac/5/

Docs for event.preventDefault() : http://api.jquery.com/event.preventDefault/

Docs for event.stopPropagation() : http://api.jquery.com/event.stopPropagation/