在网站上向后/向前单击后，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")来解决此问题。谁能阐明为什么这有所作为？