CODEWITHSUNDEEP
jqueryios
Andrei RRR
Andrei RRR

Reputation: 3162

jquery.click() not working in iOS

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?

Upvotes: 25

Views: 51692

Answers (6)

tim983627
tim983627

Reputation: 3

$('#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

Upvotes: 0

Derek
Derek

Reputation: 2735

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');
});

Upvotes: 80

Marc
Marc

Reputation: 4851

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>

Upvotes: 1

Eduard Kolosovskyi
Eduard Kolosovskyi

Reputation: 1554

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;
}

Upvotes: 2

DUzun
DUzun

Reputation: 1712

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!

Upvotes: 1

Yacuzo
Yacuzo

Reputation: 641

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:

  1. The target element of the event is a link or a form field.
  2. 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.
  3. The target element, or any of its ancestors up to and including the document has a cursor: pointer CSS declarations.

Upvotes: 11

Related Questions