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

How to make links in ajax loaded page load other pages?

本文关键字：加载 链接 其他 何使 ajax      更新时间：2023-09-26

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

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

<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 将外部页面<div id="guts">内的内容动态加载到索引页面上具有相同 id 的div 中.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正在正常加载并且没有将 url 更新为/#page_2.html

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

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

提前感谢！

试试这个：

$("#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元素中的现有元素和新<a>元素上正确绑定click处理程序。因此，如果要向.dyn元素添加新的<a>标记，脚本将按预期工作。

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

将委派匹配项移动到$("#main-content")，您将维护一个活动的"实时"或"委托"观察程序，该观察程序将定义的单击处理程序正确绑定到新的.dyn a元素。

相关文章：