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?
Solution 1:
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');
});
Solution 2:
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.
Solution 3:
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;
}