2012-02-18 12 views
9

Używam wtyczki Bootstrap scrollspy (v2.0.0), która działa bez problemu, gdy strona wczytuje się jako pierwsza.Funkcja ScrollPy Bootstrap przestaje działać po dodaniu elementów AJAX do strony

Pasek nawigacji oraz sekcje zawartości są aktualizowane za pomocą wywołań ajax (dodawanie lub usuwanie pozycji menu). Po tym przewijaniu nie podświetl nowo dodanych elementów.

Jak mogę przekazać scrollspy do odświeżenia? A może możesz dołączyć scrollspy ręcznie do następującego kodu?

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

Odpowiedz

13

scrollspy ("odśwież") po prostu zrobi to, co nazwa mówi!

W moim przypadku dodania kodu follwing po ajax rozmowy:

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

Zauważ, że $ (this) reprezentuje element śledzony od przewijania, a nie sam pasku nawigacyjnym. Tak więc, jeśli oglądasz ciało do przewijania, możesz równie łatwo zrobić $ ("body"). Scrollspy ("odśwież"); – cmcculloh

Powiązane problemy