为什么我不断得到$（...）。scrollSpy是未定义的？

Question

我正在使用Bootstrap 4.3.1 popper 1.10.1和jquery 3.4.1

按以下顺序加载 波普尔 jQuery的 引导程序

但是结合使用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或类似的东西。

Answer 1

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。

Answer 2

$（...）。scrollSpy（）从未自行解决。但是，在使用一些代码笔时，我想出了如何修复与数据笔有关的数据。对我来说，解决问题的方法是将类别“ nav”添加到标签中。因此，它现在可以正常运行。