javascript - 複数の履歴エントリを作成する popstate ループがある場所が見つからない

Question

ナビゲーション リンクがクリックされたときにメイン div のコンテンツを置き換える単一の Web ページを作成しようとしています。pushstate 関数を実装して、div コンテンツを置き換え、URL アドレスを簡単に変更することができました。popstate 関数で戻る/進むボタンをクリックすると、コンテンツを更新することもできます。ただし、最初のリンクをクリックすると正常に動作し、次のリンクをクリックすると、2 つのプッシュステートが適用され、3 回目のクリックで 3 つのプッシュステートが適用されるように見えます。は。複数のプッシュステートが発生するのを防ぎ、履歴に重複しないようにする方法についてのアドバイスを探しています。

HTML コード:

<nav id="headerNav">
    <ul>
        <li><button class="navButton" id="signIn" href="./content/signIn.php" name="reply" title="SignIn">Sign In</button></li>
        <li><button class="navButton" id="signUp" href="./content/registration.php" name="registration" title="Registration">Sign Up</button></li>
        <li><button class="navButton" id="about" href="./content/about.php" name="settings" title="About">About</button></li>
    </ul>   
</nav>    

<section id="mainContent">
    <!-- CONTENT PAGES REPLACE HERE -->
    <?php
        include ('./content/start.php');
    ?> 
</section>

Javascript

$(document).ready(function() {

    if (window.history && 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");
    }
});