This drove me nuts. I was trying to force a particular link to open in a new tab in a mobile website using ASP.NET MVC and jQuery Mobile.

Here’s what it looked like before any changes:

<a href="<%: model.link %>" data-role="button" data-theme="button_1">Open me in a new tab!</a>

Search anywhere on the internet, and they’ll say this is the easy solution:

<a href="<%: model.link %>" target="_new" data-role="button" data-theme="button_1">Open me in a new tab!</a>

I also tried this strategy from css-tricks:

<a href="<%: model.link %>" onclick="window.open(this.href); return false;" data-role="button" data-theme="button_1">Open me in a new tab!</a>

But those didn’t work.

After a lot of frustration, my teammate tried this and it worked:

<a href="#" data-role="button" onclick="window.open('<%: model.link %>', '_blank')" data-theme="button_1">Open me in a new tab!</a>

Why does it work this way, but not the other seemingly reasonable ways? Beats me. My best guess is that it has to do with jQuery Mobile, since the two ‘normal’ things I tried work just fine without it.

Edit While this worked for iOS, Android, and Desktop browsers, there is just apparently no way to open a new tab in Windows Phone 8 unless the user long-clicks your link and explicity wants to. If you know a way around this, please email me.