Jquery panel's menu clicks behinde the panel

Question

I am using jquery panel as "overlay", so the panel just comes in front of the page when i open it. the problem is that the page behinde the panel is full of links, and when i click on a button on the panel its also clicking the link that was at the exact same place but behinde the panel, and that causes the app to change page. is anyone knows how to solve this bug?

Thank you!

Answer 1

Yep, this isn't a 'bug' as such. It's expected behaviour.

The events being triggered on the DOM (events on your 'overlay') are 'bubbling' up. You need to stop this propagation as far as the overlay:

$("#overlay.button").click(function( event ) {
  event.stopPropagation();
});

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

The call to stopPropagation() should be included in the event handler for any click events you have on your overlay.