[英]Why do I keep getting $(…).scrollSpy is undefined?
我正在使用bootstrap 4.3.1 popper 1.10.1和jquery 3.4.1
以popper jquery bootstrap的顺序加载
但是将data-spy =“ scroll”与目标结合使用不起作用,并且我自己调用scrollSpy函数会产生错误: TypeError: $(...).scrollSpy is not a function
我尝试使用该数据属性以及手动功能。 我尝试换出bootstrap和jquery函数,加载错误,从twitter bootstrap粘贴scrollSpy代码(什么也没做)
<div class="timeline" id="timeline-spy" data-spy="scroll" data-target="#timeline-wrapper">
<nav class="timeline-nav__wrapper" id="timeline-wrapper">
<ul class="timeline-nav">
... (list items)
</ul>
</nav>
</div>
我希望scrollspy可以按照描述的方式工作,并且不会抛出TypeError: $(...).scrollSpy is not a function
错误,也不是为了使data-attribute方法正常工作。
我加载的所有库:(这是symfony代码,但您应该可以看出)
{{ encore_entry_link_tags('app') }}
<link rel="stylesheet" href="{{ asset('/css/selectize.min.css') }}">
<link rel="stylesheet" href="{{ asset('/css/custom.css') }}">
<link rel="stylesheet" href="{{ asset('/css/rpg-icons/css/rpg-awesome.min.css') }}">
<script src="{{ asset('/js/popper.min.js') }}"></script>
<script src="{{ asset('/js/jquery.min.js') }}"></script>
<script src="{{ asset('/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('/js/perfect-scrollbar.js') }}"></script>
<script src="{{ asset('/js/selectize.min.js') }}"></script>
<script src="{{ asset('/js/clamp.min.js') }}"></script>
<script src="{{ asset('/theme/light/sb-admin-2.min.js') }}"></script>
{{ encore_entry_script_tags('app') }}
<script src="{{ asset('/js/toast.min.js') }}"></script>
<script src="{{ asset('/build/ckeditor/ckeditor.js') }}"></script>
<script src="{{ asset('js/vue.min.js') }}"></script>
注意:它们都在html文件中,因为我使用的是Turbolinks。
在下面的图片中,您可以看到没有一个jquery被覆盖,并且加载顺序非常正确。 app.js包含少量js,因此它不会在其中重新加载jquery或类似的东西。
Bootstrap具有两个依赖项:jQuery 1.9.1和popper.js 1.12.3。 安装Bootstrap时,需要安装这两个依赖项。
在Angular中:
安装popper.js npm install popper.js@^1.12.3 --save
安装jQuery: npm install jquery@1.9.1 --save
安装Bootstrap: npm install bootstrap@4.0.0-beta.2 --save
如果您使用的是最新版本的bootstrap(4.1+),则
对于Bootstrap 4.1
npm install popper.js@^1.14.3 --save
npm install jquery@3.3.1 --save
npm install bootstrap@4.1.1 --save
然后只需将包添加到angular.json中的脚本中即可-就像添加其他js文件一样,但是Popper.min.js应该在Bootstrap.min.js之前
在HTML中:
在Bootstrap js文件之前包含popper.js,并且Scrollspy应该可以正常工作。 CDN链接: https : //cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js 。
$(...)。scrollSpy()从未自我解决过。 但是,在使用一些代码笔时,我想出了如何修复与数据笔有关的数据。 对我来说,解决问题的方法是将类别“ nav”添加到标签中。 因此,它现在可以正常运行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.