title: Cannot find where I have a popstate loop creating multiple history entries
body: <p>I'm trying to create a single webpage that replaces the content of the main div when navigation links are clicked. I've been able to implement the pushstate function to replace the div content and change the url address pretty easily.  I also am able to get the content to refresh when the back/forward buttons are clicked with the popstate function.  However, now I click the first link and it works fine, I click the next link and it seems to apply 2 pushstates, the 3rd click, applies 3 pushstates, etc.  It seems there is a push loop occurring somewhere but not sure where it is.  I am in search of some advice on how to eliminate the multiple pushstates from occurring so they aren't duplicated in my history.</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;nav id="headerNav"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;button class="navButton" id="signIn" href="./content/signIn.php" name="reply" title="SignIn"&gt;Sign In&lt;/button&gt;&lt;/li&gt;
          &lt;li&gt;&lt;button class="navButton" id="signUp" href="./content/registration.php" name="registration" title="Registration"&gt;Sign Up&lt;/button&gt;&lt;/li&gt;
          &lt;li&gt;&lt;button class="navButton" id="about" href="./content/about.php" name="settings" title="About"&gt;About&lt;/button&gt;&lt;/li&gt;
      &lt;/ul&gt;   
  &lt;/nav&gt;    
  
  &lt;section id="mainContent"&gt;
      &lt;!-- CONTENT PAGES REPLACE HERE --&gt;
      &lt;?php
          include ('./content/start.php');
      ?&gt; 
  &lt;/section&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$(document).ready(function() {
  
      if (window.history &amp;&amp; history.pushState) {
  
          $(".navButton").click(function(e) {
                  e.preventDefault();
              $("#mainContent").fadeOut().load($(this).attr("href")).fadeIn();
              history.pushState(null, $(this).attr("title"), $(this).attr("name"));
          });
      }
  });
  
  
  window.addEventListener('popstate', function() {
      //WHEN BACK/FORWARD CLICKED CHECKS URL PATHNAME TO DETERMINE WHICH CONTENT TO PLACE IN DIV
      if (location.pathname == "/index.php") {
          $("#mainContent").load("./content/start.php");
      } else {
          $("#mainContent").load("./content" + location.pathname + ".php");
      }
  });
  </code></pre>