如何在ajax加载页面中创建链接加载其他页面?

时间:2012-07-05 22:49:47

标签: javascript jquery ajax dynamic

问题:动态加载页面中的链接不会动态加载其他页面。

在我的索引页面上,我有以下链接:

<li><a class="page_one" title="page_one" href="page_one.html">Page One</a></li>
<li><a class="page_two" title="page_two" href="page_two.html">Page Two</a></li>

这些动态将<div id="guts">内的内容从外部页面动态加载到索引页面上具有相同id的div,使用脚本dynamicpage.js(下面),除非javascript关闭,然后它将只是加载外部页面通常。

这是javascript:

    $(function() {

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



    $(".dyn").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({

                            });
                        });
                        $(".dyn a").removeClass("current");
                        $(".dyn a[href="+newHash+"]").addClass("current");
                    });
                });
        };

    });

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

});

索引页面上的链接效果很好,但是如果我想从动态加载的page_1.html链接到page_2.html,则正常加载page_2并且不会将网址更新为/#page_2.html

我已经尝试将.delegate更改为.live,但这会阻止它完全正常工作。

有人能把我推向正确的方向吗?

提前致谢!

1 个答案:

答案 0 :(得分:1)

请改为尝试:

$("#main-content").delegate(".dyn a", "click", function() {
    window.location.hash = $(this).attr("href");
    return false;
});

这就是为什么:你的功能

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

在匹配的click元素中的退出和新<a>元素上正确绑定.dyn个处理程序。因此,如果您要向<a>元素添加新的.dyn标记,则脚本将按预期工作。

但是,$mainContent.hide().load(...方法会用新加载的内容替换$("#mai-content")的内容,这意味着您已替换原始$(".dyn"),因此委托函数现在正在观看已删除的{{1} }}。

将您的授权匹配移至.dyn,您将维护一个有效的“实时”或“委托”观察程序,它将您定义的点击处理程序正确绑定到新的$("#main-content")元素。