ajmajmajma ajmajmajma - 4 months ago 8
HTML Question

Click events not firing on iOS

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

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.