I recently had a situation where I had built something for a client, tested it, etc and made it live. It worked as intended on ‘normal’ computers, but my boss, who has an iPad, found that it didn’t work at all on the iPad. Well, I say it didn’t work at all, it kinda worked, although it very definitely didn’t work as intended.
The thing in question was an animated hero panel, with navigation buttons along the side, which enabled the visitor to see different panels of content by clicking the buttons. Pretty standard stuff, nothing funky, nothing crazy, just bread ‘n’ butter jQuery, so you can imagine my surprise when it didn’t work on the iPad.
What was actually happening was that a single click was being treated as a hover, and so the active style was being applied to the navigation buttons when one of them was pressed a single time. If then pressed a second time, the animation/content change was being applied. Interesting.
Fixing the issue turned out to be surprisingly easy, we just need to sniff the userAgent string and look for iPad. Yes, I just said sniff the userAgent. I know, right?! We stopped doing userAgent-based browser detection years ago. But that indeed was the advice I found while browsing the developer docs over at apple.com, and it worked, which is of course the main thing.
The code turned out to be as simple as this:
var ua = navigator.userAgent,
event = (ua.match(/iPad/i)) ? "touchstart" : "click";
$("theElement").bind(event, function(e) {
//do shit here
}
We just try to find the string iPad in the userAgent string (specifying the case-insensitive flag), and set the event to touchstart if it is found, or click if it isn’t. We then just pass the event variable to the jQuery bind() method and supply an anonymous function as we normally would.
Changing the code to the above from what it was originally, $(theElement).click(function() { });, fixed the problem entirely, and the intended behaviour of triggering the animation/content change with a single click (or touch) was restored.
[...] This post was mentioned on Twitter by Dan Wellman. Dan Wellman said: fixing click events for the iPad when using jQuery: http://is.gd/jfXBm [...]
Nice trick! Seems like this should be applied to the iPhone as well?
Also, this vaguely reminds of a jquery fadeIn speed trick from a Paul Irish video: http://www.youtube.com/watch?v=i_qE1iAmjFg#t=18m
Thanks :D
Yeah, it should work just as well on the iPhone with a little tweak that looks for ‘iPhone’ as well as ‘iPad’ in the user agent string…
Thanks for posting this.
I was struggling for an answer to this double click issues for a few days now!
cheers!
-d
In my case I was using .click(function() …) on a select tag which worked ok on everything except ipad and iphone. I simply changed the ‘.click’ to ‘.change’ and it fixed the problem.
That’s a great tip Frank, thanks for sharing :) It would only work for elements that fire a change event, such as form controls, but useful nontheless
thanks it worked for meto …but now IE browser is giving the JS error, this obeject is not supported in IE. and error is pointing to line which i added
which line does it refer to?
Why not just run:
$(“element”).bind(“click touchstart”, function(){
alert(‘Code here’);
});
Since the click event wouldn’t get registered on devices that are interpreting it as a hover. Yes, it’s not the most efficient method, but it would solve the problem for all iOS devices and potentially android devices (haven’t tested if they are affected by this issue).
Have you tested? If this works it would be pretty cool, although as I mentioned in the post, it isn’t that iPad doesn’t fire click events, just that it handles them differently (e.g. firing them on a double click insteasd of a single click), so binding to both click and touchstart may have some undesired/unforseen effects…
I guess it’s swings and roundabouts – as you say this code isn’t the most efficient, i.e. it registers two events when only one is required, however, it does (if it works) enable us to move away from sniffing the user-agent :)
I’d be interested in testing it, could be a good excuse to finally get an iPad!
Great great great easy fix. i was getting a little frustrated trying a few things and this instantly fixed the issue. thanks for posting.
ps- works just fine if you change it to iPhone as well
Could someone show how i would insert this code to get my nav buttons working on ipad,ipod and iphone at this site.
http://www.neteffectrollon.com Thanks!
You need to put it inside the jQuery document ready function (if you’re using it) but before any event handlers that rely on the click (or touchstart) event
This worked perfectly! Great job! Thanks for sharing…
Hi Dan
This seem exactly what I need. I tried to implement this solution on an Image map (the exact same one as here http://www.svennerberg.com/examples/imagemap_rollover/index_jquery.html)
I just change their JS event to the following but IPAD is having none of it. Any idea ?
Thanks
C
var ua = navigator.userAgent,
event = (ua.match(/iPad/i)) ? “touchstart” : “click”;
$(this).bind(event, function(e) {
e.preventDefault();
var country_id = $(this).attr(‘id’).replace(‘area_’, ”);
alert(‘You clicked ‘ + country_id);
});
I saving the pic but it’s not showing up other than in the album cover. Do you know what’s up?