0

As a last resort I am seeking advice on a rather simple idea...handle a click|tap event on an iPhone using JQuery. A topic that has posts dated back in '09 and the most recent that I've found in 2013...

Currently I have no issue using just JQuery Core's click events for any Android or Desktop :

$(document).on("click", ".myEle", function(e) {
    //generate new content with append() or prepend()
})

Everything works as intended, no hassles and everything is uniform :)

However, we go down the path of Apple and things get a little bumpy... as per their documentation https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Mouse events are delivered in the same order you'd expect in other web browsers illustrated in Figure 6-4. If the user taps a nonclickable element, no events are generated. If the user taps a clickable element, events arrive in this order: mouseover, mousemove, mousedown, mouseup, and click. The mouseout event occurs only if the user taps on another clickable item. Also, if the contents of the page changes on the mousemove event, no subsequent events in the sequence are sent. This behavior allows the user to tap in the new content.

Here I want to clarify that I have also looked at: $(document).click() not working correctly on iPhone. jquery ...so I have cursor: pointer on everything that is clickable to make it the best experience for the user and for the gimmick mentioned in that article.

Getting back to the point, the iOS Dev Library states that normal mouse events should occur on clickable elements, yet my aforementioned $(document).on("click", ...) does not yield any results on iOS Safari on multiple iPhone 6s. YET using the SAME phone the events on this fiddle work as intended: http://jsfiddle.net/Gajotres/k8kSA/

  • The fiddle uses jquery mobile 1.2.0...
  • The fiddle can be changed to .on("click",...) and still works
  • The fiddle does not include jquery core yet mobile depends|extends on it!?!?

So basically I want to continue to use JQuery Core and I'd rather stay away from having to use any other library such as the following:

I wanted to ask this question before relying on any other library, mainly jQuery Mobile. Thanks to anyone who understands my issue and helps a programmer out :)

Community
  • 1
  • 1
Troy Curnel
  • 53
  • 5

1 Answers1

0

As a result of much testing, I figured out I was properly binding everything (why did I even think to doubt myself :P) and realized it was iOS Safari's support of ES6 syntax. I had various let const ... (rest parameters) that apparently were just not good enough for iOS Safari. Once I replaced everything back to good ol' vars everything worked out.

Troy Curnel
  • 53
  • 5