anchor tag not working in safari (ios) for iPhone/iPod Touch/iPad

Question

This is what I have on my HTML5

<div class="google-play">
    <a href="http://example.com" role="button">
        <img src="img/google-play-btn.png"/>                                                                    
    </a>
</div>

and works fine on chrome, FF, android but doesn't seem to work on iPad.

Solution

Use touchend event via jQuery on all anchor tags. For example:

$(function () {    
    $('a').on('click touchend', function() { 
        var link = $(this).attr('href');   
        window.open(link,'_blank'); // opens in new window as requested 

        return false; // prevent anchor click    
    });    
});

If you want to make the above iPhone and iPad specific function only, check to see if the "device" is an iPad, iPhone, etc. Like so:

$(function () {

    IS_IPAD = navigator.userAgent.match(/iPad/i) != null;
    IS_IPHONE = (navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null);

    if (IS_IPAD || IS_IPHONE) {

        $('a').on('click touchend', function() { 
            var link = $(this).attr('href');   
            window.open(link,'_blank'); // opens in new window as requested

            return false; // prevent anchor click    
        });     
    }
});

Comments

[A-Live]

And by not working you mean what exactly ?

[Mike Barwick]

Yes ma'am! Cross-platform solution my friend. :)

[Monica]

But how do I make it open in a new page? This opens on the same page. Just what if I want to open in a new page?

[Ben Saufley]

Why not click tap? Touchend may run the risk of having someone lift their finger from a drag and triggering it, right?

[Mike Barwick]

Because tap requires jQuery Mobile, no?