-1

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>
user453089
  • 719
  • 2
  • 13
  • 23
  • It is not really clear what you are doing given the partial code, but it works fine for me: http://jsfiddle.net/fkling/gcpnc/ – Felix Kling Jul 05 '11 at 14:05
  • Is `$(".innerbox").click(` supposed to be commented out? – James Montagne Jul 05 '11 at 14:05
  • 1
    The question is unclear. Can you edit and clarify? I *think* you're trying to say that when the "innerbox" `div` is clicked, you want to animate it, but you don't want the "#button" div to be animated. If so, you'll have to move the "#button" `div` out of the "innerbox" div, as the child element is going to be affected by animation on its parent. – T.J. Crowder Jul 05 '11 at 14:09
  • i did remove comment "$(".innerbox").click(" but it's something wrong with like bounce back like close close then double open.. i tried put with comment. its good proper animate but click button always follow parent div action.. its weird. =/ im gnna try find it out something wrong. – user453089 Jul 05 '11 at 14:27
  • @user: It's not weird that the button follows the parent div, that's what child elements *do* (unless there's some absolute positioning going on you haven't shown). As for the double actions and such, I expect you're calling `ShowHide` more than once. You only want to hook up the event handler once, not multiple times. – T.J. Crowder Jul 05 '11 at 14:30
  • @T.J.Crowder: ah yeah but how can get value of 'd' without function? i did put ShowHide(); in their onclick. – user453089 Jul 05 '11 at 14:37
  • @user: That would be fine, if you didn't then hook up an event handler within the function. The `onclick` attribute sets up an event handler. But your handler is *also* setting up an event handler, so you probably don't want to do that. – T.J. Crowder Jul 05 '11 at 14:58

1 Answers1

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...

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875