在AJAX调用向页面添加元素后,Bootstrap Scrollspy停止工作

Fra*_*nus 9 javascript jquery twitter-bootstrap

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

导航栏以及内容部分通过ajax调用(添加或删除菜单项)进行更新.此后,scrollspy不再突出显示新添加的项目.

如何告诉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>
Run Code Online (Sandbox Code Playgroud)

Fra*_*nus 14

scrollspy('refresh')将完全按照名称所说的做!

在我的情况下,我在ajax调用后添加了以下代码:

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

  • 请注意,$(this)表示从滚动中观看的元素,而不是导航栏本身.所以,如果你正在观看滚动的身体,你可以很容易地做$('body').scrollspy('refresh'); (3认同)