0

我正在关注这个页面来制作一个 ajax 网站。这相当简单,但我遇到的问题是链接,它们只是

   <a href="link.html">Link</a>

倾向于忽略主题标签更改并直接转到导致重新加载的 link.html 页面,而不是使用 ajax 来更新内容。

当我点击后退按钮时,ajax 部分工作,然后当我从那里单击链接时它工作 - 知道第一次登陆页面时导致这种行为的原因是什么吗?

我正在使用来自 jQuery UI 的导航器菜单,如果您需要更多信息,请告诉我,我会尽快发布。

谢谢您的帮助!

这是控制 ajax 行为的 dynamic.js 文件:

$(function() {

    var newHash      = "",
        $mainContent = $("#main-content"),
        $pageWrap    = $("#page-wrap"),
        baseHeight   = 0,
        $el;

    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $mainContent.height();

    $("nav").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });

    $(window).bind('hashchange', function(){

        newHash = window.location.hash.substring(1);

        if (newHash) {
            $mainContent
                .find("#guts")
                .fadeOut(200, function() {
                    $mainContent.hide().load(newHash + " #guts", function() {
                        $mainContent.fadeIn(200, function() {
                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                        $("nav a").removeClass("current");
                        $("nav a[href='"+newHash+"']").addClass("current");
                    });
                });
        };

    });

    $(window).trigger('hashchange');

});
4

2 回答 2

1

在将点击事件分配给链接时,您是否尝试过使用 preventDefault() ?

$("nav").delegate("a", "click", function(e) {
        e.preventDefault();
        window.location.hash = $(this).attr("href");
        return false;
    });

return false 应该做的工作,但只是为了确定

于 2012-10-31T20:48:48.687 回答
1

当我查看页面的源代码时,您拥有执行此操作的代码:

$( "#menu" ).menu({

});

在其中,你有:

location.href = link.attr( "href" );

我有一种感觉,因为除了您的hashchange处理之外,它还在执行它,它被调用并覆盖(以任何方式)AJAX 加载内容。如果您删除/评论该行,它可能会起作用,但请确保您的网站在进行此更改后仍然可以正常运行。

于 2012-10-31T21:01:45.693 回答