2

I've read a lot of the other questions involving how to close a div when you click outside of it, but I have a compounded problem in that I have other elements that are bound with .live()

What I want to happen is that if I click anywhere else on the page the div should disappear, including if I click on a 'live' element. When I click on that live element I want it's handler to proceed normally.

So far as I've read, the basic way to handle closing the div is to attach a click listener to the or $document, but this would prevent any other live event from bubbling past the aforementioned body/doc handler. Is there a way around this?

yoda
  • 10,834
  • 19
  • 64
  • 92
Steve
  • 467
  • 7
  • 28
  • this site gave a handy explanation of how live() works: http://www.bennadel.com/blog/1751-jQuery-Live-Method-And-Event-Bubbling.htm – Steve Aug 31 '11 at 23:06
  • Maybe this can help : http://api.jquery.com/event.target/ – yoda Aug 31 '11 at 23:10
  • 1
    I don't really see your problem, as you just have to not return false/call stopPropagation from the method that closes the div. – Alxandr Aug 31 '11 at 23:19
  • Returning false/stopPropagation is not what I need. I need the opposite, I want any live() calls to continue propagation after I have examined the event using the body.click() function. Is there an equivalent of a 'continuePropagation' function? – Steve Sep 01 '11 at 00:26

1 Answers1

1

In live, events bubble up the ladder from front-most to back-most in that order. In your 'live' element's click (which is a direct/indirect child of your body object), if you don't return false or stop propagation, it will bubble up the ladder to reach the document's click handler. Attaching the document's click via live doesn't seem to work.

Check sample implementation here: http://jsfiddle.net/VHtSP/6/

$('div.menu').live('click', function(e) {
    e.stopPropagation();
    alert('click inside menu. will not propagate.');
    return false;
});

$(document).click(function() {
    alert('document click() handler.');
    // close the div
    $('div.menu').hide();
});

$('a').live('click', function() {
    alert('<a> click() handler');
    // .. your code to handle the live element's click
});
techfoobar
  • 65,616
  • 14
  • 114
  • 135