从动态内容中替换动态内容

Question

我试图建立一个基本的站点，它从另一个页面的同一部分调用内容到一个特定的页面，并更新url而不重新加载公共元素。

我从去年初更新的CSS-Tricks示例开始，它作为一个单一级别的导航运行良好，但我想要做的是将第二个导航调用到动态内容区域，然后再链接到子页面。因此，次要导航器正在将新内容调用到它目前占用的部分中。

问题是，辅助导航器每隔一次单击脚本就会破坏脚本，从而导致整个页面重新加载。不是每一次，每一次。我想有一些条件，就是每次激活第二个导航时，都会在真假之间切换，但我的js技能不足，而且我常用的处理代码的方法，直到它起作用为止，都没有结果。

如果有人有任何洞察力，这是为什么会发生和如何解决它，这将是非常感谢。如果有人想要检查这里，我有一个设置它的测试示例。

父页面，其中"guts“是内容替换的目标div：

<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>

联署材料：

$(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() {
    ...
});

顺便说一句，.delegate()从jQuery 1.7开始就被.on()取代了。它们是等价的，但争论的顺序不同。