Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You just need to change the order of your handlers a bit, and use/check for propagation stopping, like this:</p> <pre><code>$("a.infolink").live("click",function(e){ $("a.infolink").removeClass("selected"); $("div.infomenu").hide(); $(this).addClass("selected"); $(this).next().show(); e.stopPropagation(); }); $("div.infomenu").live("click",function(e){ e.stopPropagation(); }); $(document).click(function(e){ if(e.isPropagationStopped()) return; //important, check for it! $("a.infolink").removeClass("selected"); $("div.infomenu").hide(); }); $("input.clickme").click(function(e){ alert("I am fired"); });​ </code></pre> <p><a href="http://jsfiddle.net/nick_craver/WL3ts/" rel="noreferrer">Give it a try here</a>, there are a few important points to keep in mind:</p> <ul> <li><a href="http://api.jquery.com/live/" rel="noreferrer"><code>.live()</code></a> handlers are on <code>document</code></li> <li>Event handlers execute in the order they were bound to any given element</li> </ul> <p>You need to stop <em>and check</em> the propagation since we're at the same level. <a href="http://api.jquery.com/event.stopPropagation/" rel="noreferrer"><code>.stopPropagation()</code></a> would prevent the bubbling from going any higher but that doesn't matter, it's <em>at the same level</em> in the DOM, so you need to check if it was stopped, using <a href="http://api.jquery.com/event.isPropagationStopped/" rel="noreferrer"><code>.isPropagationStopped()</code></a>. Also, since the handlers fire in order, you need to bind that <code>document.onclick</code> <em>after</em> your other event handlers, otherwise it'll execute first, before the others tried to stop propagation.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload