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

Answer 1

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 2

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 3

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 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(); 
});