Posted over 5 years ago. Visible to the public.

How to fix: iPad does not trigger click event on some elements

iPads will not trigger click events for all elements. You can fix that, but you don't want to know why.

Example: Capturing clicks on table rows (use case would be clicking the 1st link inside it for better UI). Consider this setup:

Copy
<table> <tr> <td>hello</td> </tr> </table>

^

Copy
$(document).on('click', 'tr', function () { alert('row clicked') });

While this works on a desktop browser, clicking the row/cell on an iPad will just do nothing.

Turns out, the iPad will only trigger such events for elements that have

  • the cursor: pointer CSS property set (on the element or via a CSS rule),
  • or an onclick attribute (which may be empty)

So these will both work:

Copy
<table> <tr onclick=""> <td>hello</td> </tr> <tr style="cursor: pointer"> <td>hello</td> </tr> </table>

This may sound insane, so I set up a jsFiddle so you can see for yourself: http://jsfiddle.net/g38peLvo/

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Owner of this card:

Avatar
Arne Hartherz
Last edit:
about 2 years ago
by Arne Hartherz
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more