title: History API and History.js Back Button issue
body: <p>I am loading the page via Ajax. When the user clicks a link the page is being loaded AJAX successfully, but when the user click the back button the pages reloads the initial page. so the scenario is this.</p>
  
  <ol>
  <li>Load the initial page(index.php)</li>
  <li>User Clicks on the link</li>
  <li>The Page loads Successfully</li>
  <li>Clicks the Back button</li>
  <li>The initial page is now being shown twice.</li>
  </ol>
  
  <p>Here's the mark up.</p>
  
  <pre><code>    $(function() {
              // Prepare
              var History = window.History; // Note: We are using a capital H instead of a lower h
              if (!History.enabled) {
                  // History.js is disabled for this browser.
                  // This is because we can optionally choose to support HTML4 browsers or not.
                  return false;
              }
  
              // Bind to StateChange Event
              History.Adapter.bind(window, 'statechange', function() { // Note: We are using statechange instead of popstate
                  var State = History.getState();
                  $('#content').load(State.url);
              });
  
              $('a').click(function(evt) {
                  evt.preventDefault();
                  History.pushState(null, $(this).text(), $(this).attr('href'));
                  alert(State.url)
              });
          });
  </code></pre>
  
  <p>THis is the markup</p>
  
  <pre><code>   &lt;div id="wrap"&gt;
              &lt;a href="page1.html"&gt;Page 1&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div id="content"&gt;
              &lt;p&gt;Content within this box is replaced with content from
                  supporting pages using javascript and AJAX.&lt;/p&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>IF you still do not get my question or the scenario </p>
  
  <p>Here's the complete scenario.
  Initial Page</p>
  
  <p><img src="https://i.stack.imgur.com/EiBJb.png" alt="enter image description here"></p>
  
  <p>When the User Clicks the link the selected page loads successfully</p>
  
  <p><img src="https://i.stack.imgur.com/2I3CK.png" alt="enter image description here"></p>
  
  <p>When I click the back button the initial page is now doubled</p>
  
  <p><img src="https://i.stack.imgur.com/3shIu.png" alt="enter image description here"></p>
  
  <p>As you can see the "Page1" link is doubled. Is this a browser issue? or my understading of the history api is something lacking or missing? What is the possible solution for this?</p>