在网站上单击后退/前进后，AJAX 调用不更新部分页面内容

Question

我正在尝试生成历史状态，以便可以在我的 AJAX 支持的页面上向后和向前单击。它在很大程度上可以工作，但是在一个页面上，当我在加载前一页/后一页状态后单击按钮时，我的 AJAX 调用不会更新页面内容。为什么？

问题发生在#filtered_posts div 上。在我的主页上，我在#filtered_posts 中显示帖子，上面有一个类别过滤器。当我单击类别过滤器上的按钮时，它会更新#filtered_posts 中的内容。如果我在主页上单击后退或前进而不按类别过滤器按钮，它会成功检索具有正确状态#filtered_posts 的页面。但是，如果我然后单击类别过滤器按钮，我的网站 URL 会更新，但 #filtered_posts 不会，并且单击后退/前进只会更改 URL。我该如何解决这个问题？

另外，我有没有办法只在主页上单击后退或前进时更新#filtered_posts的状态，并为所有其他页面更新.main div中的内容？

这是我的简化代码：

    $(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);
        });
    });

Answer 1

我已设法通过将代码中的 filtered_posts 变量替换为 $("#filtered_posts") 来解决此问题。