动态加载内容和导航栏项目在 ScrollSpy 上无法正常工作

Question

我有一些要求，其中很少有数据内容及其相应的按钮动态添加到 NavBar。当动态添加内容时，ScrollSpy 无法正常工作并且表现得很疲倦。

在内容上滚动，没有激活合适的按钮。

我知道它与动态添加有关，但不知道如何解决它。

Jsfiddle：在下面的 JSFiddle 中，如果您单击“欢迎”，则会添加两个新内容 Div 和选项卡，之后当您开始滚动时，功能无法正常工作。

$('.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;

});

感谢您的回复

如是

Answer 1

动态添加元素时，需要在添加完元素后刷新scrollspy

来自最新的 bootstrap 文档 http://getbootstrap.com/javascript/#scrollspy

Methods

.scrollspy('refresh')

When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:
$('[data-spy="scroll"]').each(function () {
    var $spy = $(this).scrollspy('refresh')
})

动态加载内容和导航栏项目在 ScrollSpy 上无法正常工作

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

dynamic

twitter-bootstrap

scrollspy