jquery.click() not working in iOS

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

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

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.

Tags:

Ios

Jquery

Recent Posts