jQuery click events on the iPad

I recently built a site for a client that had a fancy jQuery portfolio that slides up and down when an image is clicked. I tested it on all the major browsers and operating systems and then sent it for approval to our client. The report we got back was that it didn’t work on the iPad.

I recently built a site for a client that had a fancy jQuery portfolio that slides up and down when an image is clicked. I tested it on all the major browsers and operating systems and then sent it for approval to our client. The report we got back was that it didn't work on the iPad.

There's also an on hover event that shows an overlay saying “See More”. The problem I had was that the first click is treated as a hover event by the iPad and therefore it never registers a click.

There's a really simple fix for this. We need to detect iPad in the userAgent string. This was the advice given in the developer docs at apple.com.

The code you need is:

var ua = navigator.userAgent;
var event = (ua.match(/iPad/i)) ? 'touchstart' : 'click';

$('#theElement').bind(event, function() {
  // jquery code
}

That basically searches for iPad in the userAgent string (case insensitive). If the user is on an iPad we use touchstart and if not we default back to a standard click.

This was the code I had before:

$('#theElement').live('click', function() {
  // jquery code
});

It now looks like this:

$('#theElement').live(event, function() {
  // jquery code
});

Featured Clients

Brighton & Hove City Council
Towers Watson
Friday Media Group