2012-02-18 13 views
9

Estoy usando el plugin Scrollspy de Bootstrap (v2.0.0) que funciona sin problemas cuando la página se carga primero.Bootstrap Scrollspy deja de funcionar después de que una llamada AJAX haya agregado elementos a la página

La barra de navegación y las secciones de contenido se actualizan mediante llamadas ajax (agregar o quitar elementos de menú). Después de esto Scrollspy ya no resalta los elementos recién agregados.

¿Cómo le digo a scrollspy que actualice? ¿O tal vez adjuntar Scrollspy manualmente al siguiente código?

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

Respuesta

13

scrollspy ('refresh') simplemente hará lo que su nombre indica!

En mi caso he añadido el código follwing después de la llamada AJAX:

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

Tenga en cuenta que $ (este) representa el elemento de ser observado a partir de desplazamiento, no la propia barra de navegación. Entonces, si estás mirando el cuerpo para desplazarte, podrías hacer $ ('body'). Scrollspy ('refresh'); – cmcculloh

Cuestiones relacionadas