如何在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> 

這些動態中<div id="guts">從外部網頁使用腳本dynamicpage.js內容加載到一個div與索引頁面上相同的ID （下面），除非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

我試着改變.llegate到.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處理程序。因此，如果要將新的<a>標籤添加到.dyn元素，該腳本將按預期工作。

然而，$mainContent.hide().load(...方法取代了$("#mai-content")與新加載的內容的內容，這意味着你已經取代了原來$(".dyn")所以委託功能現在看去除.dyn。

將您的代表團匹配移動到$("#main-content")，您將維護一個活動的「實時」或「委託」觀察器，該觀察器將正確地將您定義的點擊處理程序綁定到新的.dyn a元素。