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…

Answer 1

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