為什么我不斷得到$（...）。scrollSpy是未定義的？

Question

我正在使用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或類似的東西。

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”添加到標簽中。 因此，它現在可以正常運行。