如何使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元素內的退出元素和新的<a>元素上正確綁定click處理程序。 因此，如果.dyn元素添加新的<a>標記，則腳本將按預期工作。

但是， $mainContent.hide().load(...方法將$("#mai-content")內容替換為新加載的內容，這意味着您已經替換了原始的$(".dyn")因此委托函數現在正在監視已刪除的.dyn 。

將您的委托匹配移動到$("#main-content") ，您將維護一個活動的“實時”或“委托”觀察者，該觀察者會將您定義的點擊處理程序正確綁定到新的.dyn a元素。