Clickable LI overrules links within the LI

Question

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">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. jQuery DIV click, with anchors

Can you help me?? :-)

Thank you in advance...

This is bad practice and not progressively enhancing a webpage, just so you know. — Will Morgan, Apr 13 '10 at 12:14

score 3 · Answer 1 · edited Sep 28 '11 at 19:51

3

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

edited Sep 28 '11 at 19:51

answered Apr 13 '10 at 07:20

jAndy

231,737
57
305
359

I can't get it to work Andy. What does the "case 'div':{" do? Should I put "window.location = $(this).attr("url");" where you wrote "Do something"? Can you insert my information as above, to illustrate your idea better? – curly_brackets Apr 13 '10 at 07:48
I actually already did that. You can remove the 'DIV' part, it was just an example that 'nodeName' can contain any DOM element. The interesting part for you is the 'A' closure. Should do the work. – jAndy Apr 13 '10 at 08:17
Doh, I actually didn't understand in the first place. I edited the code which should do the trick now. But beware, using custom attribute tags might cause some trouble. – jAndy Apr 13 '10 at 12:08

score 1 · Accepted Answer · answered Apr 13 '10 at 10:02

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

This solution worked like a charm, and with the least amout of code - therefor this is the solution I accept... :-) — curly_brackets, Apr 13 '10 at 12:23

score 0 · Answer 3 · answered Apr 13 '10 at 09:15

0

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">Some info with links</a>
        <a href="http://www.imerco.dk" target="_blank">Imerco</a></a>
    </li>
</ul>

answered Apr 13 '10 at 09:15

makeitmorehuman

11,287
3
52
76

score 0 · Answer 4 · answered Apr 13 '10 at 11:20

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.

Clickable LI overrules links within the LI

4 Answers4