在 AJAX 调用将元素添加到页面后，Bootstrap Scrollspy 停止工作答案

【问题标题】：Bootstrap Scrollspy stops working after an AJAX call added elements to the page在 AJAX 调用将元素添加到页面后，Bootstrap Scrollspy 停止工作
【发布时间】：2012-02-18 14:18:48
【问题描述】：

我正在使用 Bootstrap scrollspy 插件 (v2.0.0)，它在页面首次加载时可以正常工作。

导航栏和内容部分通过 ajax 调用（添加或删除菜单项）进行更新。在此滚动间谍不再突出显示新添加的项目之后。

如何让 scrollspy 刷新？或者也许手动将 scrollspy 附加到以下代码？

  <body data-spy="scroll" data-target=".subnav" data-offset="0">
    <div id="listing">
      <div class="subnav">
        <ul class="nav nav-pills nav-stacked">
          <li><a href="#cat2">Home &amp; Garden</a></li>
          <li><a href="#cat5">Computers &amp; Networking</a></li>
        </ul>
      </div>  
      <div>
        <section id="cat2">...</section>
        <section id="cat5">...</section>
      </div>
    </div>
  </body>

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

scrollspy('refresh') 只会按照名字所说的做！

在我的例子中，我在 ajax 调用之后添加了以下代码：

$('[data-spy="scroll"]').each(function () {
  $(this).scrollspy('refresh');
});

【讨论】：

请注意 $(this) 代表被滚动观看的元素，而不是导航栏本身。因此，如果您正在观看 body 滚动，您可以轻松地执行 $('body').scrollspy('refresh');