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/