替换动态内容中的动态内容

Question

我试图设置一个基本站点，将内容从另一个页面的相同部分调入一个页面的特定部分，并在不重新加载公共元素的情况下更新URL。

我从去年年初更新了CSS-Tricks example，它作为一个单层导航工作得很好，但我想要做的是调用辅助导航到动态内容区域，然后将链接到孩子页面。所以辅助导航将新内容调用到它当前占用的同一部分。

问题是辅助导航栏在每次点击时都会中断脚本，导致整个页面重新加载。不是每一次，每隔一次。我猜想有一些情况是每次启动辅助导航时切换真与假之间的关系，但我的js技能缺乏，而我通常用代码来摆弄代码直到它以某种方式工作的方法没有被淘汰出局。

如果任何人有任何洞察，为什么会发生这种情况，以及如何解决它，它将非常感激。如果有人想查看，我有一个测试示例here。

父页面，其中 “胆” 是内容替换目标格：

<header> 
    <nav> 
    <ul> 
     <li><h2><a href="index.html">Home</a></h1></li> 
     <li><h2><a href="about.html">About</a></h1></li> 
     <li><h2><a href="contact.html">Contact</a></h1></li> 
    </ul> 
    </nav> 
</header> 

<section id="main-content"> 
    <div id="guts"> 
    <h1>Landing page with sub-navigation. Nav bg is gray on page load.</h1> 
    <nav id="sub-nav"> 
     <ul> 
     <li><h3><a href="example1.html">Sub-Nav Link</a></h3></li> 
     <li><h3><a href="example2.html">Other Sub-Nav Link</a></h3></li> 
     </ul> 
    </nav> 
    </div> 
</section> 

儿童页：

<header> 
    <nav id="sub-one"> 
    <ul> 
     <li><h2><a href="index.html">Home</a></h1></li> 
     <li><h2><a href="about.html">About</a></h1></li> 
     <li><h2><a href="contact.html">Contact</a></h1></li> 
    </ul> 
    </nav> 
</header> 

<section id="main-content"> 
    <div id="guts"> 
    <h1>First sub-page via sub-nav. If top nav bg changed to green, the whole page was reloaded.</h1> 
    <nav id="sub-nav"> 
     <ul> 
     <li><h3><a href="example1.html">Sub-Nav Link</a></h3></li> 
     <li><h3><a href="example2.html">Other Sub-Nav Link</a></h3></li> 
     </ul> 
    </nav> 
    </div> 
</section> 

JS：

$(function() { 

    if(Modernizr.history){ 

    var newHash  = "", 
     $mainContent = $("#main-content"), 
     $pageWrap = $("#page-wrap"), 
     $el; 

    $("nav").delegate("a", "click", function() { 
     _link = $(this).attr("href"); 
     history.pushState(null, null, _link); 
     loadContent(_link); 
     return false; 
    }); 

    function loadContent(href){ 
     $mainContent 
       .find("#guts") 
       .fadeOut(200, function() { 
        $mainContent.hide().load(href + " #guts", function() { 
         $mainContent.fadeIn(200); 
         $("nav a").removeClass("current"); 
         console.log(href); 
         $("nav a[href$="+href+"]").addClass("current"); 
        }); 
       }); 
    } 

    $(window).bind('popstate', function(){ 
     _link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only 
     loadContent(_link); 
    }); 

} // otherwise, history is not supported, so nothing fancy here. 


}); 

Answer 1

当您使用.delegate()，您绑定的元素必须是静态的，动态元素的选择器在争论中发言：。 $("nav").delegate()适用于第一级导航，但发送级导航是动态加载的，因此绑定不起作用。您需要绑定到一个静态的元素：

$mainContent.on("click", "nav a", function() { 
    ... 
}); 

BTW，.delegate()已被.on()所取代在jQuery 1.7。它们是等价的，但参数的顺序不同。