Clever Geek Handbook

Don't show events that don't fire iOS

I have a list with nested lists that I want to open by clicking on them. It works great on desktop and across browsers, but when I use iOS, iPad or iPhone, it doesn't want to work.

the list looks like this:

<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 is like this:

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

});

I have an immediate start stop to stop clicking on a checkbox from activating slidetoggle, but on iOS, it won't even show (and only if) you check the checkbox. clicking on itself does nothing in iOS devices.

+3


source to share


3 answers


If you add this style to the element <li>

, it works:

li { cursor: pointer; }


JSFIDDLE DEMO

It seems that the bug with iOS events is a link .

+6


source


This happens in very specific conditions:

  • there is a: hover rule for a clickable element. Styles in this rule do not matter, the rule may even be empty.
  • has a rough CSS3 sibling rule with the most specific term that matches at least one element in the DOM. It doesn't have to be the whole rule. Again, the rule can be empty.
  • The clicked element is followed by the element (which can also be wrapped as the first element within the element).


You have a: hover rule for the clickable element. The styles in this rule do not matter, the rule may even be empty. and you have a rough CSS3 sibling rule with the most specific term that matches at least one element in the DOM. It doesn't have to be the whole rule. Again, the rule can be empty. and the clicked element is followed by the element (which can also be wrapped as the first element within the element). In this case, a click on an element that can be clicked (be it a click from the JavaScript onclick handler or simply) is not logged. Instead, it applies the: hover style and only on the second touch does it move or run JavaScript. This only happens in Mobile SafariChanging and it will all make the error go away,so all of these steps are valid workarounds:

after reviewing our code, all of these conditions apply to us, but would also be impractical, but eliminating those conditions.

+1


source


I faced this problem too and the CSS cursor trick didn't work for me.

Luckily, after playing around for a while, I found that the click event is always passed to anchor tags and can fix my problem by changing my Divs to Anchor tags.

0


source






More articles:


All Articles