Question

我创建了一个jquery ajax代码来使用 pushstate 显示内容，它运行良好但是当我点击后退和前进按钮时，内容不会再次更改。在这种情况下如何创建活动 onpopstate ？

    <script>
    $(document).ready(function () {

        $(".load-ajax").click(function (e) {
            e.preventDefault();
            var route = $(this).attr('href');

            $.ajax({
                type: 'get',
                dataType: 'json',
                url: Routing.generate('admin_order_state_new'),
                success: function (msg) {
                    if (msg["ok"] === undefined) {
                        alert('error');
                    } else {
                        window.history.pushState(null, "Title", route);

                        $("#mydiv").html(msg["ok"]);
                    }
                }
            });
            return false;
        });

    });

</script>

Answer 1

解决

$(document).ready(function () {

function loadPage(route) {
    $.ajax({
        type: 'get',
        dataType: 'html',
        url: route,
        success: function (msg) {
            if (msg === undefined) {
                alert('error');
            } else {
                $('#content').replaceWith(
                    // with the returned one from the AJAX response.
                    $(msg).find('#content')
                );

            }
        }
    });
}

$(window).on('popstate', function () {
    loadPage(location.pathname);
});

$(".load-ajax").click(function (e) {
    e.preventDefault();
    var route = $(this).attr('href');

    window.history.pushState(null, "Title", route);

    loadPage(route)

 });


});

如何在点击后退和前进按钮

1 个答案: