Question

Im using the following click function on an element:

$('#extras').toggle(function() {
                    $('div#extras').show(); 
                    $('div#extras').stop().fadeTo('fast', 1);
                }, 
                function() {
                    $('div#extras').stop().fadeTo('fast', 0, function() { 
                                                             $(this).hide(); 
                                                             } );
                }
);

extras is a div, with many children in it. Some are buttons. Now every time I click one of the buttons, it makes the parent div along with the children disapear.

How do I make it so the click function only fires if the parent is clicked, and not all of its children?

Thanks 🙂

Answer 1

When you click on a element the click event will be fired for all parent elements. This can be stopped by returning false from the event handler of the children. So you need to have event handlers for all children that shouldn’t fire the click event of your div and return false from them. Something like this:

$("#id-of-button-inside-your-div").click(function() {
    //Do whatever you need to do
    return false;
});