jQuery click event handlers not working properly on iOS devices

Question

The page in question contains 3 anchor tag elements. When one of these anchor tags is clicked, it should trigger a jQuery function that hides the current div and shows another - moving the user to the next process in the order.

Everything works fine on PC's and android devices, but not on iOS devices.

After digging around on this site, I came across a number of proposed solutions, but none of them seem to be correcting the issue. I've tried:

• Removing the href attribute all together (as well as just having a #)
• Removing all hover effects for the anchor
• Updating the jQuery from .on('click', function() to .bind('click touchstart', function()
• Adding a blank onclick="" attribute to the anchor
• Setting the style attribute of the anchor to cursor: pointer

The code for the 3 anchor tags:

<a href="#top" class="tin-size-btn" onclick="">Add</a>

The jQuery:

$('.tin-size-btn').css('cursor','pointer');
$('.tin-size-btn').bind('click touchstart', function(){ ...

Answer 1

I believe you should just keep the touchstart event for touch interfaces such as smartphones or tablets. Likewise, instead of touchstart, you may consider using touchend instead since you might want to trigger the action once the touch is done.

$('.tin-size-btn').bind('touchend', function(){ ...