Вызов AJAX не обновляет частичное содержимое страницы после щелчка назад/вперед на веб-сайте

Я пытаюсь генерировать состояния истории, чтобы я мог щелкать назад и вперед на своих страницах с поддержкой AJAX. Это в основном работает, но на одной странице мой вызов AJAX не обновляет содержимое страницы, когда я нажимаю кнопку после загрузки предыдущего/позднего состояния страницы. Почему?

Проблема возникает с #filtered_posts div. На моей домашней странице я показываю сообщения внутри #filtered_posts с фильтром категорий над ним. Когда я нажимаю кнопку в фильтре категорий, он обновляет содержимое внутри #filtered_posts. Если я нажимаю назад или вперед на главной странице, не нажимая кнопку фильтра категории, она успешно извлекает страницу с правильным состоянием #filtered_posts. Но если я затем нажму кнопку фильтра категории, URL-адрес моего веб-сайта обновится, а #filtered_posts — нет, а нажатие назад/вперед только изменит URL-адрес. Как я могу это исправить?

Кроме того, есть ли способ обновить состояние #filtered_posts только при нажатии назад или вперед на главной странице и обновить содержимое в разделе .main для всех других страниц?

Вот мой упрощенный код:

    $(document).ready(function () {

        var $mainContent = $(".main");
        var mainContentHTML;
        var value;
        var title;
        var filtered_posts = $("#filtered_posts");

        $(document).on("click", "nav li a", function (e) {
            e.preventDefault();
            value = $(this).attr("href");
            $mainContent.load(value + " .main", function (data) {
                console.log("this function works properly");
            })
        });

        $(document).on("click", "#category-filter li.filter-button", function (e) {
            e.preventDefault();
            value = $(this).find("a").attr("href");
            var category = $(this).data("category");

            $.post(wp_ajax.ajax_url, {
                    action: "filter",
                    category: category
                },
                function (data, status, xhr) {
                    if (status == "success") {
                        filtered_posts.html(data);
                    }
                    if (status == "error") {
                        console.warn(data);
                    }
                });
        });

        //Create history to enable back button functionality
        $(document).ajaxComplete(function (event, jqXHR, settings) {
            mainContentHTML = $(".main").html();
            title = $(document).find("h1.entry-title").text();
            var stateObj = {
                content: mainContentHTML
            };
            window.history.pushState(stateObj, title, value);
        });

        window.addEventListener('popstate', function (event) {
            var state = event.state == null ? mainContentHTML : event.state.content;
            $mainContent.html(state);
        });
    });