Clickable LI overrules links within the LI

Question

Hello guys and gals...

I have a LI with some information, including some links. I would like jQuery to make the LI clickable, but also remain the links in the LI.

The Clickable part works. I just need the links within to work as well.
NOTE: They work if you right click and choose "Open in new tab".

HTML

<ul id="onskeliste">
    <li url="http://www.dr.dk"&gt;Some info with links <a href="http://www.imerco.dk" target="_blank">Imerco</a></a>
</ul>

jQuery

$(document).ready(function() {
 $("#onskeliste li").click(
 function()
 {
  window.location = $(this).attr("url");
  return false;
 });

})(jQuery);

I've found a simular question here, but it doesn't seem to solve my problem. http://stackoverflow.com/questions/180211/jquery-div-click-with-anchors

Can you help me?? :-)

Thank you in advance...

Answer 1

use the event target, like:

$("#onskeliste li").bind('click', function(e){
   switch(e.target.nodeName){
       case 'LI':{
           e.preventDefault();
           e.stopPropagation();
           window.location = $(e.target).attr('url');
           break;
       }
       case 'A':{
           // do something               
           break;
       }
   }
});

Kind Regards

--Andy

Answer 2

Can you just change the mark up to this and not write js for this?

<ul id="onskeliste">
    <li>
        <a href="http://www.dr.dk"&gt;Some info with links</a>
        <a href="http://www.imerco.dk" target="_blank">Imerco</a></a>
    </li>
</ul>

Answer 3

The problem your having is caused by event propagation. The click on the <a/> tag bubbles up to the <li/> tag, therefore causing the li's click event to "overrule" the link's click.

Essentially, the li's click happens immediately after the clicking on the link. It's like you've clicked on a link to one site, and then clicked a link to a different site before the browser had a chance to change the page.
A solution to this would be to stop the event from bubbling up to the <li/>, thus preventing it from changing the window's location.

I suggest using event.stopPropagation() on the <a/> tag, like this:

$('#onskeliste li a').click(function(e) {
    e.stopPropagation();
});

Answer 4

As @GeReV said, it's event propagation.

$(document).ready(function() {
  $('#onskeliste li').click(function(e) {
    if ($(e.target).is(':not(a)')) {
      window.location = $(this).attr('url');
      return false;
    }
  });
 })(jQuery);

This looks at what you clicked and if it's not a link it looks at the url attribute on the list element. If it is a link it does its normal link thing.