jquery .click overriding anchor href when i dont want it to!

Question

I have a set of nested DIVs that slidetoggle using jQuery as the user clicks on them. Inside the innermost DIV there is an anchor tag with an HREF that should navigate somewhere. The problem is that when I click on the link it slidetoggles just like the parent DIVs instead of navigating to the url. If I right click the anchor and select open in new tab then that navigates fine. Please can you spot whats going wrong? Thanks

  <div class="pod"> 
    <li id='ThirdParty'> 
        <div class='block'> 
            <h1>ThirdParty</h1>
            <div class='systemHeader'> 
                <h2><span>Bobs shop</span></h2> 
                <div class='subSystems'>                     
                    <div class='subSystemHeader'> 
                        <h3><span>&nbsp;Gifts</span></h3> 
                        <div class='reports '> 
                            <p class='reports i1'> 
                                <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=470' title=''>Option 1</a></p> 
                        </div> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </li> 
</div>

    $("div.subSystemHeader, div.subSystemHeader").click(function() { 
   $("> div", this).slideToggle(...); 
   return false; 
}); 

Answer 1

A few changes here, there's no need to repeat the same selector, and check that the event didn't come from an <a> tag, like this:

$("div.subSystemHeader").click(function(e) { 
  if(e.target.nodeName == 'A') return; //skip this handler, don't return false
  $("> div", this).slideToggle(...); 
  return false; 
});

You can test it here. If the event target was from the <a> (there are no children of it) then we just exit the handler, returning undefined, since we're not explicitly returning false the click event will do it's normal thing...going to the href.

Answer 2

you can check the event object of the click and then check the event target - see also http://api.jquery.com/event.target/

 $("div.subSystemHeader, div.subSystemHeader").click(function(event) { 
   if(event.target.nodeName.toLowerCase() == 'a') return;
 ...
 }

(didnt test it, but it should work)

Answer 3

Your problem is return false; which is blocking the default behavior.

$("a:eq(0)").click(function() {
    return false; /* does nothing */
});
$("a:eq(1)").click(function() {
    /* go to href */
});

• Example on jsFiddle

Answer 4

I just came across this issue today. I found a very interesting article that might help. It describes the mis(use) of 'return false' and Jquery events (http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/). I haven't tested the following code on your example, but I think this should work.

$('.subSystemHeader a').click(function(e){
    e.stopPropagation(); 
});