实现“后退按钮”关于 jquery ajax 调用

Question

我正在尝试在这个完整的ajax网站上实现后退按钮。我尝试了jquery历史记录插件，但我确信我弄乱了一些东西，因为散列看起来不错，但后退按钮不会加载原始内容。

这是我的菜单是什么样的：

       <div id="nav" class="ajaxload menu">
            <ul>
                <li><a href="home.aspx">Home</a></li>
                <li><a href="about.aspx">About Us</a></li>
                <li><a href="contact.aspx">Contact</a></li>
            </ul>
        </div>    

ajax 调用：

     $(function() {
            var $content = $('#content');
            $('.ajaxload li a').click(function() {

                $content.html('<div id="loader"></div>');

                var url = $(this).attr('href');
                $.get(url, function(data) {
                    $content.hide().html(data).fadeIn("slow", function() { $("#loader").fadeOut("fast") });
                });
                return false;
            });
        });

Answer 1

我猜当您使用历史记录插件时，您可能没有初始化它。初始化它时，您向它传递一个处理哈希更改的回调，以便您可以再次加载内容。因此，例如，您不必做这样的事情：

$('a').click(function clickedLink() {
    var href=$(this).attr('href');
    $.history.load(href);
    doSomeAJAXRequest(href);
    return false;
});

您必须做这样的事情：

$.history.init(function hashChanged(hash) {
    doSomeAJAXRequest(href);
});
$('a').click(function clickedLink() {
    var href=$(this).attr('href');
    $.history.load(href);
    return false;
});