jquery stop child triggering parent event

Question

Hi, I have a div which I have attached an onclick event to. in this div is a a tag with a link. when i click the link the onclick event from the div is also triggered. how can i disable this so that if the link is clicked on the div onclick is not fired.

script.

    $(document).ready(function(){
        $(".header").bind("click", function(){
            $(this).children(".children").toggle();
        });
    })

html code

                <div class="header">
        <a href="link.html">some link</a>
                        <ul class="children">
                    <li>some list</li>
                </ul>

thanks

Answer 1

Do this:

$(document).ready(function(){
    $(".header").click(function(){
        $(this).children(".children").toggle();
    });
   $(".header a").click(function(e) {
        e.stopPropagation();
   });
});

If you want to read more on .stopPropagation(), look here.