19

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?

5
  • 2
    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 <a> 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, 2012 at 5: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, 2012 at 5:36
  • click works fine in iOS, your problem is elsewhere. And nnnnnn is right, you should also look into using <button>. May 14, 2012 at 5:40
  • 1
    I created a fiddle and it works fine in iphone4's safari
    – mprabhat
    May 14, 2012 at 5: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? May 14, 2012 at 5:48

5 Answers 5

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

2
  • 21
    Well Android has no problem using its initiative and making "click" being treated as touch. iOS is the new IE Jan 17, 2017 at 13:56
  • Yep just been dealing with flexbox on Safari, nightmare. Dec 4, 2018 at 17:43
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
});
1
  • 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. Apr 23, 2016 at 20:59
2

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
});
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();
   });
}
2
  • wouldnt this also fire a click event if a user is trying to scroll?
    – wsgg
    Jul 23, 2019 at 1:22
  • It does, yes. You can add a check on the target to match a specific element to only fire click on this element. Jul 24, 2019 at 7:27
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.

1
  • 12
    using touchstart might accidentally trigger a click when the user tries to scroll
    – brettish
    Aug 29, 2014 at 15:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.