How to make my 'click' function work with iOS

Question

I have a set of Div's which act as buttons. These buttons have a simple jquery click() function which works in all browsers except iOS.

For example:

<div class="button">click me</div>

and

$('.button').click(function(){

   alert('hi');

});

I'm not sure why this doesn't work on iOS - clearly there is no 'clicking' in iOS.

Unfortunately I don't have an iphone device to test this myself, but I'm getting a lot of complaints from my clients who want to click things and nothing is happening.

What is the key to getting this working?

I don't know about iOs, but your code won't work for users of desktop browsers either if those users use a keyboard but no pointing device (i.e., no mouse) - which some users do by choice, and others users do due to some physical disability. You should use `` elements (you can still style them to look the way you want). And if you have paying clients who expect iPhone compatibility then you need to get yourself an iPhone for testing - you can write it off as a business expense... — nnnnnn, May 14 '12 at 05:36
Way too many missing details in your question. If you're on a mac, run the iOS emulator with Safari in developer mode. Incidentally, when are you binding the click handler to .button? Does this happen after `$.ready` is fired? — Lior Cohen, May 14 '12 at 05:36
`click` works fine in iOS, your problem is elsewhere. And nnnnnn is right, you should also look into using ` — mu is too short, May 14 '12 at 05:40
I created a [fiddle](http://jsfiddle.net/mprabhat/PZg9J/) and it works fine in iphone4's safari — mprabhat, May 14 '12 at 05:42
I'm sorry guys, I simplified my code when in reality these click functions are being loaded in a live('click',function) - would that change anything? — willdanceforfun, May 14 '12 at 05:48

score 37 · Accepted Answer · answered May 14 '12 at 05:42

37

Click ": means When a mousedown and mouseup event occur on the same element OR an element is activated by the keyboard.

from Jquery Bug, there is work around , Just add "cursor: pointer" to the element's CSS and the click event will work as expected. and you can even see this Jquery click on Ios for help

answered May 14 '12 at 05:42

Ravi Gadag

15,735
5
57
83

21

Well Android has no problem using its initiative and making "click" being treated as touch. iOS is the new IE – Antony D'Andrea Jan 17 '17 at 13:56
Yep just been dealing with flexbox on Safari, nightmare. – Richard Peck Dec 04 '18 at 17:43

score 7 · Answer 2 · answered Dec 28 '15 at 11:53

7

Actually, the accepted answer did not work for me. I tried using "cursor:pointer", onclick="", and even convert the element to an anchor tag.

What i did to make it work is to bind the touchstart event insted of the click event. To make it work on all platforms i had to to an ugly ua spoofing like this:

var ua = navigator.userAgent,
event = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";

jQuery("body").on(event, '.clickable_element', function(e) {
    // do something here
});

answered Dec 28 '15 at 11:53

Marek Maurizio

1,073
2
11
22

2

Totally works for me! Rewrote it without the `jQuery("body")`though, and used a little less confusing var name instead of 'event', but I guess the latter was just for clarifying purposes. – cptstarling Apr 23 '16 at 20:59

score 2 · Answer 3 · edited May 23 '17 at 11:54

Based on Marek's answer this is my take on it (it's a bit cleaned up):

var ua = navigator.userAgent, 
pickclick = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";

$('.clickable_element').on(pickclick, function(e) {
     // do something here
});

There's still a lot of work ahead for the industry when it comes to standards…

EDIT:

Didn't work out on Android phones. Took a more rigid approach:

if (document.documentElement.clientWidth > 1025) { pickclick = 'click' }
if (document.documentElement.clientWidth < 1025) { pickclick = 'touchstart' }

$('.clickable_element').on(pickclick, function(e) {
     // do something here
});

score 2 · Answer 4 · edited May 23 '17 at 12:34

2

Also based on Marek's answer, which adapts the event to the device to fire a function, here is a code that force to fire a click on iOS devices, where there is first a touchstart event :

var UA = navigator.userAgent,
iOS = !!(UA.match(/iPad|iPhone/i));

if (iOS) {
   $(document).on('touchstart', function (e) {
       e.target.click();
   });
}

edited May 23 '17 at 12:34

Community

1
1

answered Feb 01 '17 at 16:28

Matthieu Pétel

71
1
3

wouldnt this also fire a click event if a user is trying to scroll? – wsgg Jul 23 '19 at 01:22
It does, yes. You can add a check on the target to match a specific element to only fire click on this element. – Matthieu Pétel Jul 24 '19 at 07:27

score 0 · Answer 5 · edited Jan 20 '14 at 08:28

0

You can use this:

$('button').bind( "touchstart", function(){
    alert('hi');
});

Another Solution is to set the element's cursor to pointer and it work with jQuery live and click event. Set it in CSS.

edited Jan 20 '14 at 08:28

SteppingHat

1,199
4
19
50

answered May 14 '12 at 05:51

Abhishek Singh

6,068
1
23
25

12

using `touchstart` might accidentally trigger a click when the user tries to scroll – brettish Aug 29 '14 at 15:54

How to make my 'click' function work with iOS

5 Answers5

Linked

Related