how to tell jquery to select a parent element, but not its children?

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

Try to use the children() method.

$('div#extras').children().show();

Answer 2

If you hide the parent, you WILL hide the children (decendants) by default.

just for completeness: the selector for the parent of the current element is $(this).parent();

Answer 3

If a div disappears, all of its content disappears. If you have to make the parent disappear without the children, you should place the children outside in the DOM, and if needed, visually place them inside using CSS.

Answer 4

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;
});

Answer 5

Try this:

$('div#extras').find('*').click(function(event){ event.stopPropagation(); });

This will make all the elements inside the div to ignore the click event from the div.