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