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

Posted . Visible to the public.

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:

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

^

$(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:

<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/ Show archive.org snapshot

Arne Hartherz
Last edit
Arne Hartherz
License
Source code in this card is licensed under the MIT License.
Posted by Arne Hartherz to makandra dev (2015-07-20 13:25)