External links in phonegap

Found an interesting behavior today.  I have an LI element that has a click handler on it, but that LI element has an A element which has a link.  So it looked kind of like this:

1
2
3
4
5

<ul>
<li onclick="doSomething(); ">
<A href="http://somewhere" target="_blank">Go</a>
</li>
</ul>

But when I clicked on the link the event would fire (expectedly) but it wouldn’t open the link in the mobile browser window.

Pulled my hair out for a while and then I wanted to see if the A element was actually being clicked so I attached a click event.  It was, which made no sense.  Why would the click fire but not the href?

On a whim I thought I would try stopping the event propagation.  Turns out that worked.  The link opened in the new window.  So now my code has this in there.

1
2
3
4
5

var a = $('<a target="_blank" />');
a.attr('href', myLink);
a.click(function(e() {
  e.stopPropagation();
});

Just a little trick.  Hope it helps you.