So, I have this link, that should send an AJAX request everytime it is clicked:
<a href="/application/start_game?human_is_first=true" data-remote="true">Yes</a>
But, it doesn’t always work the first try. And sometimes, it will work only after other AJAX links are clicked (which also don’t send requests when they should).
I know that the link is sending requests, because the server console output doesn’t change when I click the link. No errors, nothing.
I am using rails.js and jQuery 1.4.4.
Live app to show you what is going on: http://ttt-ai.heroku.com/
There’s nothing wrong with the JavaScript on the page; only with your poor CSS.
You see, in your whole “Yes” and “No” buttons, the actual link element occupies only the tiny amount of space directly around the letters. The link has absolutely no padding and is therefore easy to miss when clicking on the button.
Because you created “:hover” style on the LI element itself, you gave us the impression that the whole element reacts to clicks. It does not. Only the A element reacts to clicks and is handled by rails.js.