如何在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元素。