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/

Does your version of Ruby on Rails still receive security updates?
Rails LTS provides security patches for old versions of Ruby on Rails (3.2 and 2.3).

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