Click events not firing on iOS

Question

I have a list with nested lists that I want to open upon clicking them. It works fine on desktop, and across various browser, but when I use iOS, either iPad or iPhone, it does not want to work.

the list looks like so:

<ul class="lessonList">
   <li class="lessonItem" id="1"><input type="checkbox" class="scopeCheck">Default Scope
      <ul style="display:none;" class="scope1">...other content in here</ul>
   </li> 
</ul>

and the code like so :

$(document).on("click",".lessonItem",function(e){
    e.stopImmediatePropagation();
         $(this).children("ul").slideToggle();

});

I have a stop immediateprop to stop clicking the checkbox from activating the slidetoggle however on iOS, it will not even drop until (and only if) you check off the checkbox. clicking on the li itself does nothing in the iOS devices.

Answer 1

If you add this style to the <li> element, it works:

li { cursor: pointer; }

JSFIDDLE DEMO

It seems to be a bug with iOS events – reference.

Answer 2

I was running into this issue as well and the CSS cursor trick didn't work for me.

Luckily after some playing around I found that the click event is always transmitted to anchor tags, and was able fix my issue by changing my Div containers to Anchor tags.

Answer 3

This occurs under very specific conditions:

• have a :hover rule for an element that is clickable. The styles in that rule don't matter, the rule can even be empty.
• have a CSS3 adjacent sibling rule with a most specific term that matches at least one element in the DOM. It doesn't need to match the entire rule. Again, the rule can even be empty.
• The clickable element is followed by an element (which could also be wrapped as the first element inside a element).

You have a :hover rule for an element that is clickable. The styles in that rule don't matter, the rule can even be empty. and you have a CSS3 adjacent sibling rule with a most specific term that matches at least one element in the DOM. It doesn't need to match the entire rule. Again, the rule can even be empty. and the clickable element is followed by an element (which could also be wrapped as the first element inside a element). In that case, tapping the clickable element (whether that click is a JavaScript onclick handler, or just a simple ) does not register. Instead, it applies the :hover style and only on the second tap does it navigate or run the JavaScript. This happens only on Mobile SafariChanging pretty much anything will make the bug disappear, so all of these are valid workarounds:

after checking our code all these conditions apply for us, but will also be impractical to but removing these conditions.