jquery.click() not working in iOS

Question

HTML:

<div id="footer">
    <a class="button1 selected" id="button1" href="#"><div class="icon"></div><div class="text">Option 1</div></a>
    <a class="button2" id="button2" href="#"><div class="icon"></div><div class="text">Option 2</div></a>
    <a class="button3" id="button3" href="#"><div class="icon"></div><div class="text">Option 3</div></a>
    <a class="button4" id="button4" href="#"><div class="icon"></div><div class="text">Option 4</div></a>
</div>

JS:

$('#button1').click(function() {
    alert('button1');
});

$('#button2').click(function() {
    alert('button2');
});

Now, this script works perfectly on my PC Browser but it doesn't work on iOS. I've tried this solution too: $(document).click() not working correctly on iPhone. jquery but it doesen't work.

I am using on jQuery 1.8.3, no jQuery Mobile (I prefer not to).

Somebody can help me with this?

It should work fine, but since you say it doesn't: try `$('#button1').on('click touch', function() {...})` instead. — Blazemonger, Feb 26 '13 at 17:59
I think the real problem is that you're wrapping a pair of `` tags around some `
`s. This shouldn't be illegal, but some browsers may balk at it. — Blazemonger, Feb 26 '13 at 18:05

score 80 · Accepted Answer · edited Feb 28 '20 at 17:54

80

Try to add a pointer cursor to the button and use .on to bind the click event.

$('#button1').css('cursor','pointer');
$(document).on('click', '#button1',  function(event) {
    event.preventDefault();
    alert('button1');
});

edited Feb 28 '20 at 17:54

SeniorDeveloper

886
1
12
22

answered Feb 26 '13 at 18:01

Derek

2,695
1
16
17

Mobile touchscreens don't have cursors. And your JS is literally equivalent to calling `.click()`; jQuery converts one to the other internally. – Blazemonger Feb 26 '13 at 18:03
Interesting. Have a reference for that? – Blazemonger Feb 26 '13 at 18:08
3

I encountered this problem before and try to do sth like this. Luckily, it works. – Derek Feb 26 '13 at 18:10
2

I've no idea why this works (or in fact why `.on('click'...` wasn't working for me) but it does work – Turnip Jan 23 '14 at 16:51
11

To my suprise, this answer is acually right. Adding "cursor: pointer" actually makes the difference between clickable and not clickable. – Sebastian van Wickern Jan 31 '15 at 11:52
The `event.preventDefault();` missed in my script and was causing though there was nothing which should have been obviously prevented. – Blackbam Nov 14 '18 at 14:51
OK very weird, i tried multiple solutions (on-click, touch events, and more) and already noticed this one (in CSS) in a few places and so nearly discarded it.. Adding CURSOR:POINTER via JS for me however allowed it to work every-time! Nasty looking however but I can live with it. – harri May 06 '21 at 14:59
It's not working in 2021 – Stefan Dec 04 '21 at 18:19

score 11 · Answer 2 · edited May 20 '16 at 19:47

11

I came across this: http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

In short, one of these conditions needs to be met for iOS browsers to generate click events from touch-events:

The target element of the event is a link or a form field.

The target element, or any of its ancestors up to but not including the <body>, has an explicit event handler set for any of the mouse events. This event handler may be an empty function.

The target element, or any of its ancestors up to and including the document has a cursor: pointer CSS declarations.

edited May 20 '16 at 19:47

NotMe

87,343
27
171
245

answered Apr 07 '16 at 08:34

Yacuzo

542
7
6

adding `onclick=""` on a page-wrapping element worked for me. Setting `style="cursor: pointer"` on that element also worked, but since this page isn't mobile-only, that wasn't a great solution for desktop users. – A N Jul 01 '19 at 16:58
Neither worked for me... unbelievable... – Stefan Dec 04 '21 at 18:21

Eduard Kolosovskyi · Answer 3 · 2018-03-20T09:54:03.853

2

A general solution might be something like this:

JS

const IS_IOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (IS_IOS) {
    document.documentElement.classList.add('ios');
}

CSS

.ios,
.ios * {
    // causes dom events events to be fired
    cursor: pointer;
}

edited Mar 20 '18 at 09:54

answered Feb 28 '18 at 10:45

Eduard Kolosovskyi

1,396
12
18

score 1 · Answer 4 · answered Mar 20 '18 at 09:27

1

Yacuzo's answer is the most exhaustive. But I want to add the 4th trick (my favorite):

$('div:first').on('click', $.noop);

And it doesn't matter whether the first div is a parent of your target element or not!

answered Mar 20 '18 at 09:27

DUzun

1,693
17
15

score 1 · Answer 5 · answered Jun 20 '19 at 15:39

The simplest solution to this issue is to just add cursor: pointer; to the style (CSS) of the element that you are targeting.

#button1 {
    cursor: pointer;
}

Alternatively, this could be added inline:

<a class="button1 selected" id="button1" href="#" style="cursor: pointer;"><div class="icon"></div><div class="text">Option 1</div></a>

score 0 · Answer 6 · answered Dec 23 '21 at 07:08

$('#button1').css('cursor','pointer');

this function not work on cordova 10.0、Xcode 13.2

I use this function Solve the problem↓

document.getElementById('chatpage').click();
document.getElementById('chatpage').click();

.click two time can solve the problem on me

For your reference

jquery.click() not working in iOS

6 Answers6

Linked