javascript div closing problem

Question

Hello,

I have a div that opens when user clicks link. And the div sort hovers over the link (its a more info box/div) and the div has a links and text. Now what I want is that when user cliks outside of the div it closes/disappears. But I want the links inside of div to work. Atm the javascript for that closin is like this:

$('html').click( function() {
   $('#moreInfo').hide();                                           
});

But the problem is that when user clicks the link inside of that #moreInfo the link doesn't work and the div just closes (it should go to different page from that link, not close the div).

Answer 1

You can do this:

$(document).click(function() {
  $('#moreInfo').hide();                                           
});
$('#moreInfo').click(function(e) {
  e.stopPropagation();
});

By using event.stopPropagation() on the click handler for the <div>, clicks coming from inside won't bubble up to where you have a handler to close it...which is what's currently happening.

Answer 2

If I understood correctly, you don't want to hide the DIV, you want to remove it from the DOM tree.

If this is the case, try this:

$('#moreInfo').remove();

Just remember to keep the reference to the item, so that you can re-add it when you need to.

Answer 3

Maybe try something like:

$('not:(#moreInfo)').click( function() {
   $('#moreInfo').hide();                                           
});

Answer 4

Hi,

I recommend you to put a closing X on the up right corner of your DIV (like a window)... In other case, you can handle blur event of a "special" element inside your div.

Hope that helps,