Analytics Tracking code targeting a button not sending events

I followed this tutorial to the dot: http://ift.tt/1io17BG

I made a button, gave it an id of "button" and made sure I called the correct analytics code.

Here's what I have:

<form method="http://link_to_current_page">
    <input type="submit" id="button" value="Click Here Please">
</form>

I thought maybe the button needed to do more so I turned it into a form that refreshes the page and no dice.

In the Footer:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*newDate();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXX-YY', 'auto'); // I have the correct tracking number here
ga('send', 'pageview');

</script>

Called to this .js file farther down in the footer:

jQuery(document).ready(function(e) {
   jQuery('#button').on('click', function() {
      ga('send', 'event', 'button', 'click', 'nav-buttons');
   }); 
});

While I'm browsing the page, Analytics knows I'm there via the Real-Time > Overview section, so I'm not sure what I'm missing.