stopPropagation(); doesnt work to stop top of this child div

Question

problem between parent and child DIV. when u click on child div will show up same as parent div. i want child div not follow parent div action. i tried stopPropagation() is not work or maybe im confuse.

html code:

<div class="innerbox">
<div id="button"></div>
</div>

jQuery code:

<script type="text/javascript">
//<![CDATA[
function ShowHide(d){
    $("div#button").click(function(e) {
       e.stopPropagation();
       return;
    });

    //$(".innerbox").click(function(e) {
        jQuery(d).animate({"height": "toggle"}, {
            duration: 500,
            complete: function() {
                //add action after complete action...
            }
        });
    //});
}
//]]>
</script>

Answer 1

If you're saing that when the ".innerbox" div is clicked, you want to animate it, but you don't want the "#button" div to be animated, you'll have to move the "#button" div out of the ".innerbox" div, as a child element is going to be affected by animation on its parent.

stopPropagation is about stopping the event itself bubbling up to ancestor elements, not the effects of what you do. Certainly in that case, the click event is being stopped and not sent onto the ".innerbox" div.

---

This may be off-topic, but when/how do you call ShowHide? Because you're hooking up an event handler within the function; a new handler will be attached every time you call ShowHide. I don't think that's likely what you want...