0

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(){ ...
MarketHubb
  • 437
  • 3
  • 11
  • Try adding cursor pointer in the css file like this --- cursor: pointer; or have a look at this --- http://stackoverflow.com/questions/15095868/jquery-click-not-working-in-ios – Tasos Jul 03 '14 at 15:29
  • That code should work fine, see http://jsbin.com/zahiguni/3 for an example. It's possible there is another library in your page that is affecting the behavior. Can you replicate this problem with only a link and the jQuery library? – Palpatim Jul 03 '14 at 15:40
  • Tried going directly to the CSS with the cursor, still no go. Here is an interesting discrepancy I just noticed, if the first (of the three) anchor tags in 'tapped', it works just fine. If the second or third are, the page bubbles up to the anchor, but the jQuery isn't run. Could this be some sort of event delegation issue? – MarketHubb Jul 03 '14 at 15:57

1 Answers1

0

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(){ ...
rukimira
  • 66
  • 5
  • Modern mobile browsers & webviews synthesize mouse-equivalent events from touch events specifically so you do not have to do this. – Palpatim Jul 03 '14 at 15:41
  • You are right. Though, I remembered having the same issue after registering click and touchstart: both events triggered the callback function at the same time... So by limiting to just one event, it may solve the case here. – rukimira Jul 03 '14 at 15:50