title: Javascript onClick event not firing
body: <p>I am trying to use Javascript to control a web form. Here is all my Javascript code and what I am trying to achieve added to it as well.</p>
  
  <pre><code>$(document).ready(function(){
      function loadPage(url){
          $(".body").fadeOut(400, function(){
              $(".body").load(url);
              $(".body").fadeIn(400);
          });
      }
      loadPage("pages/login.html");
  
      $("#button").on("click", function(){
          var pageTo = this.name;
          loadPage("pages/" + pageTo + ".html");
      });
  });
  </code></pre>
  
  <p>The code will do more complex things later on, but it doesn't even run the above.</p>
  
  <p>My form looks like this</p>
  
  <pre><code>&lt;FORM&gt;
      &lt;SPAN class='header'&gt;Login&lt;/SPAN&gt;&lt;BR/&gt;
      &lt;LABEL for='username' class='loginLabel'&gt;Username&lt;/LABEL&gt;
      &lt;INPUT type='text' id='username' name='username' value='' /&gt;
      &lt;LABEL for='password'class='loginLabel'&gt;Password&lt;/LABEL&gt;
      &lt;INPUT type='password' id='password' name='password' value='' /&gt;
      &lt;INPUT type='hidden' name='process' value='login' /&gt;
      &lt;INPUT type='button' value='Login' name='index' id='button' /&gt;
  &lt;/FORM&gt;
  </code></pre>
  
  <p>Its a simple login form, but the text does not show up in the console when the button is clicked. I don't want to use a submit button and the JQuery .submit() event because I want the same code to work with multiple types of things, including links and possibly other elements.</p>