Question

I’m having an issue with a pop-up menu. I basically have 2 click events, one is for opening a menu, which returns false if a particular button is clicked and the other click event is on the document and meant to close the menu if someone clicks anywhere on the page but the menu.

In below example, I’m not expecting to see click on document in the console, but I do. What am I doing wrong?

$('#content .addOptions').live("click",function(){
  console.log("click on addoptions")

    return false;
});


$(document).click(function () {
  console.log("click on document")

});

Answer 1

You need to prevent the bubbling of the click event up to the document level, as you are indeed clicking on both the menu and the document which contains it. So do this:

$('#content .addOptions').on("click",function(e){
  e.stopPropagation();
  console.log("click on addoptions")

    return false;
});

Note also the change to using on method instead of live.