twitter bootstrap - Dynamically Load content and Navbar items are not working properly on ScrollSpy -

i have requirements few data content , corresponding buttons dynamically adding navbar. when content dynamically adding after scrollspy not working , behaving wearied.

scrolling on content, no proper button getting active.

i know has dynamic adding don't know how resolve it.

jsfiddle: in below jsfiddle, if click on welcome 2 new content div , tabs getting added , after when start scrolling, functionality not working properly.

http://jsfiddle.net/26e8nduc/2/

$('.navbar li a').click(function (event) {  var scrollpos = $('body > .container').find($(this).attr('href')).offset().top - offsetheight; $('body,html').animate({     scrolltop: scrollpos }, 500, function () {     $(".btn-navbar").click(); }); return false; 

});

thanks response

rushi

when adding elements dynamically, need refresh scrollspy after elements have been added.

from latest bootstrap documentation http://getbootstrap.com/javascript/#scrollspy

methods

.scrollspy('refresh')

when using scrollspy in conjunction adding or removing of elements dom, you'll need call refresh method so:

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