jQuery click not working in iOS?

Question

I have added some simple javascript to a site:

jQuery(document).click(function(){
  alert('click');
});

...and it only fires in iOS when someone clicks on an actual anchor element, button element, or on something with cursor: pointer; CSS.

Specifically, I am seeing this with the Bootstrap 3 fixed navbar menu. When it's open, I have added:

jQuery(document).click(function(){
  jQuery('#navbar-collapse.collapse.in').collapse('hide');
});

to ensure that it closes no matter where someone clicks.

This is not working in iOS (verified on iPhone 4, iPhone 6/6+ and iPads).

It seems that jQuery click events only register on "clickable" elements (A, BUTTON, etc) or elements with cursor: pointer; CSS or onClick='...something...' or even or onClick='' HTML attributes.

So, my question. Is this just me? Does anyone else see this?

Answer 1

How apple handles events

By design you need to use a clickable element. So yes, everyone will experience this issue unless they take care of it with a solution similar to this. If it can't be expected to be clicked then it won't be seen that way by IOS.

An excerpt from apples developer page.

Making Elements Clickable

Because of the way Safari on iOS creates events to emulate a mouse, some of your elements may not behave as expected on iOS. In particular, some menus that only use mousemove handlers, as in Listing 6-1, need to be changed because iOS doesn’t recognize them as clickable elements.

Listing 6-1 A menu using a mouseover handler

<span onmouseover = "..."
  onmouseout  = "..."
WHERE TO BUY
</span>

To fix this, add a dummy onclick handler, onclick = "void(0)", so that Safari on iOS recognizes the span element as a clickable element, as shown in Listing 6-2.

Listing 6-2 Adding an onclick handler

<span onmouseover = "..."
  onmouseout  = "..."
  onclick = "void(0)">
WHERE TO BUY
</span>