jQuery click events not working in iOS

Question

Second update: Looks like one of my functions (resetFigures) was preventing the event handler, so moving that to the end of the bind function sorted it out.

Update: I realized after some basic testing that the click events were registering, it's just that the box fails to flip when tapped.

I have the basic aesthetic functionality of my site working in Chrome and Firefox, but it refuses to behave properly on iOS (test on iPhone 4 with iOS 6.1 and iPad with iOS 4.3.5).

You can view the site and of course the scripts (main.js) here: http://bos.rggwebdesigns.com/

I've read that iOS doesn't really handle jQuery click events properly, but I'm struggling to figure out a fix. A couple threads here on Stack Overflow mentioned the live() method, but implementing it like follows (as well as adding onclick="" to the clickable elements) didn't seem to work:

$('.card').live('click touchstart', function() {
        var figure = $(this).children('.back');
        var button = figure.find('.button');
        var column = $(this).parents().eq(1);
        $('.column').removeAttr('style');
        column.css('z-index', 2000);
        resetFigures();
        if(flipCard(this)){
            swoosh.pause();
            swoosh.currentTime = 0;
            swoosh.play();
        }
    });

I also came across this interesting workaround project: http://aanandprasad.com/articles/jquery-tappable/. However, I had no luck with that either:

$('.card').tappable(function() {
        var figure = $(this).children('.back');
        var button = figure.find('.button');
        var column = $(this).parents().eq(1);
        $('.column').removeAttr('style');
        column.css('z-index', 2000);
        resetFigures();
        if(flipCard(this)){
            swoosh.pause();
            swoosh.currentTime = 0;
            swoosh.play();
        }
    });

Also, please correct me if I've been mislead, but according to this site, 3D transforms are supported in iOS with the appropriate prefixes: http://caniuse.com/transforms3d

1) live is replaced by on. 2) on also has issues as I found out a while ago:http://stackoverflow.com/questions/9698003/on-preventdefault — mplungjan, Feb 10 '13 at 08:23
@Alexander Tapping the boxes on iOS has no effect aside from the hover state. — Bobe, Feb 10 '13 at 09:31
Here is a pretty good summary about the issue at MDN: https://developer.mozilla.org/en/docs/Web/Events/click#Safari_Mobile — leo, Aug 18 '16 at 15:53

score 256 · Answer 1 · edited Apr 02 '14 at 12:22

256

There is an issue with iOS not registering click/touch events bound to elements added after DOM loads.

While PPK has this advice: http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html

I've found this the easy fix, simply add this to the css:

cursor: pointer;

edited Apr 02 '14 at 12:22

decates

3,296
1
18
24

answered Apr 15 '13 at 01:26

BingeBoy

2,933
1
15
12

12

wow... how is this real?! Safari done gone done it this time. This Quirksblog article clears it up further: http://www.quirksmode.org/blog/archives/2010/10/click_event_del_1.html – Larry Mar 26 '14 at 00:11
This absolutely saved me a TON of time. How would one know to try something like this? Apple has to get this together. They probably won't but gee wiz -__- – Martavis P. Apr 10 '15 at 06:20
8

Couple years later this fix is still relevant... Makes you wonder if this issue will ever be addressed in iOS. – santa Apr 17 '15 at 17:46
2

WTF!? I'm wondering why click events don't work in IOS in a phonegap app using jquery .on(). I add cursor:pointer to a class and walla! This is ridiculous but it works. This is a 5 year old topic. – Khary Jul 15 '15 at 00:43
Can confirm this worked for me, but it's weird it's a thing in the first place xD I tried binding all future events on click and tap but wouldn't work on iOS until I did cursor: pointer fix. – Kiwizoom Sep 26 '16 at 18:32
Such an epic solution. You know, in my early years of web design, I was under the impression that CSS could solve any HTML related issue. That sentiment seems even more true now. I appreciate this. – Alexander Dixon Mar 16 '17 at 17:15
In 2017 this is still an issue. Absolutely amazing. – charrondev Aug 14 '17 at 20:14
15

A few years ago in some Apple office: "Let's depend on a css value to decide whether we should register a click event or not". Genius! – Tashows Aug 17 '17 at 21:20
1

After despairing over my script for hours, frantically trying to work out where I did something wrong to cause a simple button to not work on iOS devices, I found this through DuckDuckGo, think "this can't work", try it anyway because desperate, and it actually works. This messes with my brain. – Tijmen Sep 04 '17 at 12:32
3

Apple and Microsoft, probably should stop creating browser... :\ – A Gupta Dec 19 '17 at 15:17
13

2018... still an issue, 5 years and they haven't fixed this yet – Roberto Arosemena Jan 16 '18 at 20:04
1

Apply `cursor: pointer;` to the element you want to listen to its `listen` event – deerchao Mar 21 '18 at 12:37
1

Just been bitten by this ridiculous problem - `cursor:pointer` saved the day! – Matt Roberts Mar 22 '18 at 14:22
2

cursor:pointer its crazy fix >_ – Nikolay Apr 09 '18 at 10:23
1

July 2018. This is still the solution. I don't think however, this is a bug but a design decision by iOS. For whatever reason, they think it's a good idea for CSS to influence the JavaScript behaviour. – Abdul Sadik Yalcin Jul 05 '18 at 09:46
2

Oktober 2018 Still a working fix! – Paul Oct 17 '18 at 12:23
1

Saved me hours of seekibg – Seldimi Oct 30 '18 at 20:49
December 2018... still working (－‸ლ) – Will Dec 08 '18 at 18:45
2

If you are using tag ``, you can also add **href** attribute into the tag. `click here` => `click here`. – revoke Dec 13 '18 at 11:02
6

Still relevant in 2019 :) – Vadzim Jun 27 '19 at 10:59
3

2020 still going strong – bruno Apr 21 '20 at 14:59
1

Still working in 2020 :) – Amol Naik Jun 25 '20 at 10:56
1

Still relevant in 2021, gotta give props to Apple developers for not being able to solve this. – Kay Angevare Apr 01 '21 at 14:52
2021 - The solution doesn't work. – Stefan Dec 04 '21 at 18:10

score 58 · Answer 2 · answered Jan 14 '15 at 08:08

58

Recently when working on a web app for a client, I noticed that any click events added to a non-anchor element didn't work on the iPad or iPhone. All desktop and other mobile devices worked fine - but as the Apple products are the most popular mobile devices, it was important to get it fixed.

Turns out that any non-anchor element assigned a click handler in jQuery must either have an onClick attribute (can be empty like below):

onClick=""

OR

The element css needs to have the following declaration:

cursor:pointer

Strange, but that's what it took to get things working again!
source:http://www.mitch-solutions.com/blog/17-ipad-jquery-live-click-events-not-working

answered Jan 14 '15 at 08:08

saurabh kamble

1,445
1
25
39

2

so so weird. a{cursor:pointer;} worked for me – wils Sep 07 '17 at 02:01
1

`* { /* To receive click events on iOS */ cursor: pointer; } ` – Krzysztof Przygoda Mar 15 '18 at 10:45
3

Thanks. Adding `onClick=""` to my `
` which have a jQuery onClick handler worked perfectly. It was working everywhere but Safari iOS before adding this onClick attribute.
– Mtxz Aug 28 '18 at 16:39

score 2 · Answer 3 · answered Feb 10 '13 at 09:05

2

You should bind the tap event, the click does not exist on mobile safari or in the UIWbview. You can also use this polyfill ,to avoid the 300ms delay when a link is touched.

answered Feb 10 '13 at 09:05

oiledCode

8,499
6
42
59

I tried implementing bind(), with and without jQuery Mobile for 'tap' and 'vclick', but it didn't work. Is it possible that the hover pseudo-element is interfering since on iOS a tap on an element with `:hover` defined is the equivalent of mouseover? – Bobe Feb 10 '13 at 09:58
I don't know about the hover sorry – oiledCode Feb 10 '13 at 10:24
It's fine. It was simply a matter of making sure every `:hover` selector was preceded by `.no-touch`. Still doesn't fix the event handling. – Bobe Feb 10 '13 at 10:37

jQuery click events not working in iOS

3 Answers3

Linked

Related