Laravel 6-Bootstrap 為什么 Popover 在沒有錯誤的情況下不起作用？

Question

我目前正在通過開發應用程序學習 Laravel。 我在后端做了很多事情，但在遇到前端問題時仍然很艱難。 我正在使用 bootstrap 腳手架並想在“popover”中創建一個表單。 我可以稍后再做，現在我只想解決這個按鈕。 我使用引導站點中顯示的彈出窗口。 Popover Bootstrap我只是在頁面中放置一個按鈕，並希望它在單擊時有一個彈出窗口。

<button type="button" class="btn btn-secondary" data-container="body"
                        data-toggle="popover" data-placement="left"
                        data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                        Popover on left

當我使用 {{ asset('js/app.js') }} （我的意思是 public/js/ 中的本地文件）時，我無法讓它工作。 但是當我使用這些 cdn 腳本時：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

並在我使用 cdn 時將此腳本添加到正文的底部：

$(function () { $('[data-toggle="popover"]').popover()})

有用。 但這不是一個解決方案，我想繼續使用我的內部文件而不是從 cdn 導入的文件。 根據我的閱讀和觀察，在 app.js 中已經包含了這些腳本/函數。 在這種情況下，只在刀片文件中顯示上述 app.js 的路徑就足夠了。 （我也運行'npm install popper.js --save'）。 我想有辦法用內部 js 文件解決這個按鈕。

額外：當我在控制台上輸入“Popper”時，它會響應我下面的代碼行。 所以據我所知，它是定義的。

Popper(reference, popper) {
var _this = this;
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
classCallCheck(this, Popper);
this.scheduleUpdate…

提前致謝。

Answer 1

一年后編輯：我繼續 Web 開發，當我在我的歷史中看到這個主題時，我感到驚奇並閱讀了。 當我看到問題時，我可以想象這個問題，當時它沒有工作的原因是需要在 popper.js 和 bootstrap 之前導入或需要 jquery。 我應該明白在插入 CDN 之后（通過查看順序）。 下面的文字是一年前的，沒有任何有意義的解釋。

好吧，問題以一種我不明白的非常有趣的方式解決了。 如果您還有想法，請分享您的意見。 我刪除了所有 cdn 腳本，添加了window.Jquery = require('jquery'); 資源/ JS / bootstrap.js文件＆保持$(function () { $('[data-toggle="popover"]').popover()})下的腳本。 比我運行npm run dev之后，它起作用了。 這對我來說毫無意義，因為在同一個文件中有一個代碼行，其中包含我理解的 jquery： try{ window.Popper = require('popper.js').default; window.$ = window.jQuery = require('jquery'); require('bootstrap');}.. try{ window.Popper = require('popper.js').default; window.$ = window.jQuery = require('jquery'); require('bootstrap');}.. try{ window.Popper = require('popper.js').default; window.$ = window.jQuery = require('jquery'); require('bootstrap');}..之后我刪除了我在開始window.Jquery = require('jquery');添加的行window.Jquery = require('jquery'); 並再次運行npm run dev ，它仍然有效。 現在我能想到兩件事：第一； 一旦我添加了window.Jquery = require('jquery'); 並開始npm run dev對我的一個文件做了一些事情，現在擦除該行並不重要，或者這里沒有發生任何特別的事情我只是在打開這個主題之前做了一些非常錯誤的事情。 謝謝。

Answer 2

你有window.Popper = require('popper.js').default; 在您的resources/js/bootstrap.js或resources/js/app.js文件中？

也許您可以從引導程序和應用程序 js 文件中發布代碼？