problème étrange avec pushstate / popstate - la page initiale semble avoir été "poussée" deux fois

Je suis un problème étrange avec pushstate / popstate où il semble que ma page initiale soit enregistrée deux fois.

C'est un peu difficile à expliquer sans exemple. P>

quelque chose comme ceci: p>

1. La page actuelle est www.bing.com li>
2. Copiez / coller mon URL dans une barre d'URL et des charges de page li>
3. Cliquez sur un lien de la page (Ce lien incendie une demande Ajax qui manipule ensuite le DOM pour afficher les données récupérées.) li>
4. Appuyez sur le bouton BACK qui m'amène à la même page que dans Step2 Li>
5. Appuyez à nouveau sur le bouton arrière mais je suis toujours sur la même page que STEP2 / 4 LI>
6. Appuyez à nouveau sur le bouton arrière et cela me ramène à www.bing.com li> ol>

   Comme vous pouvez le constater, je dois appuyer deux fois sur le bouton arrière pour me ramener à www.bing.com quand il ne devrait avoir besoin que 1. strong> p> Une courte explication de ma page (code est au bas de la page): p>

   1. Lorsque la page Chargue, la liste initiale de la sélection déroulante est récupérée via AJAX et remplit la balise SELECT. P> LI>

   2. L'utilisateur a la possibilité de cliquer sur 3 liens qui déterminent le contenu de la sélection déroulante. Exemple: Si je clique sur Option B Link, cela déclenche le même Ajax de Step1 mais ne récupère que les données appropriées pour l'option b. P> li>

   3. L'utilisateur fait une sélection à partir de la liste déroulante et appuie sur la recherche. Cela déclenche une autre fonction AJAX qui récupère les données pertinentes et affiche les informations formatées à l'intérieur du mysearchResults em> div. P> li>

   4. J'ai essayé de jouer avec le placement (par exemple, un appel AJAX) de pousstite et le placement semble maintenant celui qui me donne le moins de problème. Bien que je rencontre la question que j'ai mentionnée ci-dessus. P> li> ol>

      Voici mon code. J'ai dû supprimer beaucoup de code / fonctions pour le rendre court et lisible, mais s'il vous plaît être assuré que l'affichage des appels AJAX / de données fonctionnent. P>

      <div id="content">
          <p>
              <a class="coursetype" href="#" data-type="B">Option B</a>
              | <a class="coursetype" href="#" data-type="H">Option H</a>
              | <a class="coursetype" href="#" data-type="BG">Option BG</a>
          </p>
      
          <form id="myform">
              <label class="formlabel" for="course">Select your course</label>
              <br /><select id="course" name="course"></select>
              <button id="searchbutton" type="button">Search Me</button>
          </form>
      
          <div id="mysearchresults"></div>
      </div>
      
      $(document).ready(function() {
          var onClickCourseTypeHandler = function(event) {
              event.preventDefault();
      
              getCourses({ type:$(event.target).data("type") });
      
              window.history.pushState({ html:$("#content").html(), coursecode:$("#coursecode").val() }, "", main?type="+pagevars.type);
          }
      
          var onClicksearchbuttonHandler = function(event) {
              if ($("#coursecode").val().length > 0) {
                  searchDB({ course:$("#course").val() });
      
                  window.history.pushState({ html:$("#content").html(), coursecode:$("#coursecode").val() }, "", "/main?&course="+$("#course").val());
              }
          };
      
          $(document).on("click", ".coursetype", onClickCourseTypeHandler);
      
          $(document).on("click", "#searchbutton", onClicksearchbuttonHandler);
      
          try {
              window.addEventListener("popstate", function(event) {
                  if (event.state) {
                      $("#content").html(event.state.html);
      
                      if (event.state.coursecode.length > 0) {
                          if ($("#course option[value='" + event.state.course + "']").length > 0) {
                              $("#course").val(event.state.course);
                          } else {
                              $("#course option:first-child").attr("selected", "selected");
                          }
                      }
                  }
              });
          } catch(exception) {
          }
      
          onLoad();
      
          function onLoad() {
              getCourses({ type:"" });
      
              window.history.pushState({ html:$("#content").html(), course:dbvars.course }, "", "/main");
          }
      
          function searchDB(parameters) {
              $.ajax({
                  url: baseurl+"/searchDB"
                  , cache: false
                  , dataType: "json"
                  , data: { format:"json", course:parameters.course }
                  , success: function(data, status) {
                      parameters.data = data;
                      displaySearchResults(parameters);
                  }
              });
          }
      
          function getCourses(parameters) {
              if (typeof(parameters.cacheflag) === "undefined") { parameters.cacheflag = false; };
      
              $.ajax({
                  url: baseurl+"/getCourses"
                  , cache: parameters.cacheflag
                  , dataType: "json"
                  , data: { format:"json", coursetype:parameters.type }
                  , success: function(data, status) {
                      parameters.data = data;
                      populateCourses(parameters);
                  }
              });
          }
      });