/ jQuery

A Day without jQuery click events on Apple devices (iPad n iPhone) with Sitecore is Like a Day without Sunshine.

I came across an issue with a Sitecore video player component internally I was using Brightcove service, which would display an image with a play icon. jQuery click event was used to show the html 5 player and play the video although its Brightcove. The click event worked in desktop and android devices but not on Apple devices(iPad and iPhone). First I took the route of debugging the device by connecting it to laptop. Did you know you can debug the webpage rendered on a apple device from Chrome debugger tool with help of NodeJs. I have left the link in the end of this post. I later realized that wasnt much of a help with showing the event that were tagged for an element. Finally came across a comment in a stackoverflow which was eventually the fix but it wasn't an answer though. I decided to put all the possible fixes in a post that could save someone in future.

Issue:
jQuery click event will not work on Apple devices(iPhone, iPad).
https://stackoverflow.com/questions/14795944/jquery-click-events-not-working-in-ios

Possible Solutions:

  1. Does it work on other devices (desktop,Android) probally the answer is yes proceed to next step.

  2. Set the cursor style of the element to cursor. Might sound weird but it has worked for a lot of people.
    https://www.w3schools.com/cssref/pr_class_cursor.asp

  3. Did the cursor resolve the issue? If not lets move to the next option.

  4. Add an blank onClick="" event attribute to the element. This is an IOS Safari bug. Did this work ? if not lets try the next option.

  5. Do you have a video embed item hidden behind the div that you are trying to tag an event?
    The html video element likes to consume all the events and doesn't propagate or bubble the events even though the z-index is below div.

  6. The video element display has to be set to none thats the trick.
    https://www.w3schools.com/tags/tag_video.asp

Last Option worked well for me since I had an Video element behind the div which was causing the issue. Hope this helps.

Note: I followed this post to debug iPhone on a windows pc with chrome.
https://medium.com/@haroonabbasi/remote-debugging-safari-iphone-ipad-ios-11-on-windows-340b403a9829
If the above link didnt help follow this link to help setup
https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter/issues/79#issuecomment-351472710