Home/ Questions/Q 6122599
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T15:55:05+00:00

I have the following code: <html> <head> <script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"> </script> </head> <body> <div

  • 0

I have the following code:

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.6.2.min.js" 
    type="text/javascript">
    </script>
  </head>
  <body>
    <div id="a">
      <div id="b">
        <script type="text/javascript">
              $('#b').bind('fuffle',function() {alert('b fuffled');})
        </script>
        <div id="c"></div>
      </div>
    </div>
  </body>
</html>

When I run:

$("#b").trigger('fuffle')

I get the alert box as I would expect. However, when I run:

$("#c").trigger('fuffle')

I also get the alert box. I am guessing this because c is nested in b, however, is there a technique where this behavior could be avoided.

In my code, sub elements can also trigger fuffle, but they are bound to a different method.
This behavior is literally causing a JS stackoverflow error.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try passing the event to your anonymous handler function like 

    ...'fuffle', function(e) {alert...

    then call

    e.stopPropagation()

    which will prevent the event bubbling. The more blunt approach is to return false.

    http://api.jquery.com/event.stopPropagation/

    • 0