Question

I have some jQuery code to close my menu:

$('body').click(function(){
  $('#menu').hide();
});
$("#menu").click(function(e) {
  e.stopPropagation();
  return false;       
});

However on my #menu element I have some elements that have click events attached to them:

$('.menu_elem').live("click", function(){
  //Do something
});

My problem is that the e.stopPropagation() is preventing my click events for my menu. How can I avoid this?

Answer 1

I’m not sure I understand your HTML exactly, but if #menu is the root of your menu and .menu_elem are menu items in the menu, then you could change your delegated event handling to to be captures at #menu like this:

$("#menu").on("click", ".menu_elem", function () {
   // do something
});

This has the following advantages:

1. It changes the delegated event handling to capture the bubbled events at #menu so it doesn’t need propagation beyond #menu in order to work so you don’t have to change your.stopPropagation() code.

2. It switches away from (the now deprecated) .live() to the replacement .on() which gives you more control over where the bubbled events are captured.