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: pointerCSS property set (on the element or via a CSS rule), - or an
onclickattribute (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/
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.
