如何使ajax加载页面中的链接加载其他页面？

Question

问题：动态加载页面中的链接没有动态加载其他页面。

在我的索引页面上，我有如下链接：

<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>

这些使用脚本dynamicpage.js（如下）将<div id="guts">中的内容从外部页面动态加载到索引页面上具有相同ID的div中，除非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 正在正常加载，而不是将 url 更新为 /#page_2.html

我尝试将 .delegate 更改为 .live，但这完全停止了它的工作。

谁能把我推向正确的方向？

提前致谢！

Answer 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;
});

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

但是，$mainContent.hide().load(... 方法将 $("#mai-content") 的内容替换为新加载的内容，这意味着您已经替换了原始的 $(".dyn")，因此委托函数现在正在监视已删除的 .dyn。

将您的委托匹配移动到$("#main-content")，您将保持一个活动的“实时”或“委托”观察程序，它将正确地将您定义的点击处理程序绑定到新的.dyn a 元素。