$(“.element”).first().trigger('click') - not working iPad

Question

I am using:

$(".first-image-gallery").first().trigger('click');

To create the action of clicking on a gallery of images.

The reason for this is I am using a 'Start Gallery' button elsewhere on the page and want this button to open up the first image of the gallery and then the user can move forward and back as they please.

I am using iLightBox for the gallery and can't find anything that it has build in to open up the gallery from another button or action via jQuery.

The current code I am using works fine elsewhere on desktop, but mobile iPad it wont work.

Answer 1

This is Mobile Safari oddity. Click events don't work properly on any elements without cursor: pointer; CSS property set on them.

Read more: http://www.shdon.com/blog/2013/06/07/why-your-click-events-don-t-work-on-mobile-safari

This works on every standards-compliant browser. Mobile Safari chooses to differ, however. It does not generate click events for elements that do not have either or both of:

-Directly bound onclick handler.

-The cursor property set to pointer in CSS.

Therefore, your solution seems to be:

.first-image-gallery {
  cursor: pointer;
}

I (almost) always resort to including cssua javascript library and including this bit of css, which solves this problem globally (page-wide), applying cursor: pointer; on whole page in Mobile Safari (but not in other browsers):

html.ua-safari.ua-ios {
  cursor: pointer;
}

Answer 2

Try touchstart instead:

$(".first-image-gallery").first().trigger('touchstart');

And use this in click function too like .on('click touchstart',callback);

Answer 3

I have the same issue and I have tried set cursor:pointer to the element, it doesn't work.

It is pretty obvious that trigger 'touchstart' works pretty well with jQuery, but the problem is that I need to 'click' an existing element (button) programmatically, so I need to trigger 'click'.

In the end I found that using native javascript code works perfectly, so you can try:

document.querySelectorAll('.first-image-gallery')[0].click();

At least it works immediately for my case.