jQuery/Javascript click event not working on and

elements in iOS Safari webkit

Recently we had to add a expand collapse icons for the navigation menu on mobile devices in our WordPress theme. We can not use pseudo-classes :after and :before as they are not part of the dom and any events registered on them won’t work.

So for our mobile menus, we added a <span> tag like this

$args = array(
   'theme_location'  => $theme_location,
   'container'       => 'nav',
   'container_class' => 'nav',
   'container_id'    => 'secondary-nav',
   'menu_class'      => 'menu',
   'menu_id'         => '',
   'echo'            => true,
   'before'          => '',
   'after'           => '<span class="status"></span>',
   'link_before'     => '',
   'link_after'      => '',
   'items_wrap'      => '<ul id="%1$s" class="%2$s cf">%3$s</ul>',
   'item_spacing'    => 'preserve',
   'depth'           => 0,
   'walker'          => '',
);
wp_nav_menu( $args );

turnsout that you need use a clickable element like a button or an anchor tag. 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. How apple handles events

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

There are three possible solutions

1. Use a clickable element like a button or an anchor tag if your design permits.
2. Add a dummy onclick handler, onclick = “void(0)”, so that Safari on iOS recognizes the span element as a clickable element
   <span class="status" onclick = "void(0)"></span>
3. Set the cursor CSS property on the element to pointer
   span.status{cursor:pointer}