title: Function keeps running repeatedly Jquery
body: <p>I have a stupid simple Jquery .js file I'm busy creating and I'm getting stuck on the first step.</p>
  
  <p>I currently have it setup as shown below and yet every time I click the only button on the page (submit button for a login page), it reloads the entire page and runs the first function again.</p>
  
  <p>How do i get the function to only run once</p>
  
  <pre><code>$(document).ready(function() {
      //
      //  FUNCTIONS 
      //
  
      function AllFade() {
          //Hide everything
          $('div').hide()
  
          //Fade Everything in
          $('div').fadeIn(1000);
  
          //Hide All Alerts
          $('.alert').hide();
      }
  
      function LoginCheck() {
          //Check username and pass
      }   
  
      //   EVENTS     
  
      //START SEQUENCE
      AllFade();
  
      //Login check on submit
      $('.btn').click(function() {
          LoginCheck();
      })
  });
  </code></pre>
  
  <p>!! <strong>EDIT</strong> !!</p>
  
  <p>The button's coding is this exactly:</p>
  
  <pre><code>&lt;button class="btn btn-large btn-primary"&gt;Sign in&lt;/button&gt;
  </code></pre>
  
  <p><strong>Would that still cause a reload?</strong></p>