Disabling event handler for link inside UL

Question

Hello.

I have a LI element to which I have added a "Toggle" event handler

$("#myUL li").toggle {}

Inside the LI there is an anchor (link) element:

<ul id ="myUL">
<li>Click anywhere to initiate toggle handler <a href="/">(Except here)</a></li>
</ul>

How can I tell jQuery not to initiate the Toggle event if the user clicks on the link which is inside the UL, but to do initiate the event if the user clicks anywhere inside the UL beside that link?

Thank

Joel

Answer 1

You need to stop the propagation from the anchor click event:

$('#myUL > li > a').bind('click', function(e){
   e.stopPropagation();
});

See this in action: http://www.jsfiddle.net/YjC6y/6/

Another way is to check for the event target in your handler:

$('#myUL li').toggle(function(e){
   if(e.target.tagName !== 'A'){
      // do something
   }
}, function(e){
});

Reference: .stopPropagation()