Laravel 6-Bootstrap 为什么在没有错误的情况下Popover 不起作用？

Question

我目前正在通过开发应用程序学习 laravel。我在后端做了很多事情，但遇到 front-end 问题时仍然很艰难。我正在使用 bootstrap 脚手架并想在 'popover' 中创建一个表单。我可以稍后再做，现在我只想解决这个按钮。我使用 bootstrap 站点中显示的弹出窗口。 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 时将此脚本添加到 body 底部：

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

有效。但这不是解决方案我想继续使用我的内部文件而不是从 cdn 导入的文件。根据我的阅读和观察，在 app.js 中已经包含了这些 scripts/functions。在 blade 文件中仅显示上述 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

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

也许您可以 post 您的 bootstrap 和应用程序 js 文件中的代码？

Answer 2

Edit a year later: I continue web development and when I saw this topic in my history I got wonder and read. I can imagine the problem when I see the issue and the reason that it didn't work back then is jquery needs to be imported or required before both popper.js and bootstrap. I should've understood that after inserting CDNs tho(by just looking the order). Text below belongs to a year ago and doesn't have any meaningful explanation.

好的，问题以一种我不明白的非常有趣的方式解决了。如果您还有想法，请分享您的意见。我删除了所有 cdn 脚本，将 window.Jquery = require('jquery'); 添加到 resources/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');}.. 在此之后，我再次删除了我在 window.Jquery = require('jquery'); 和运行 npm run dev 开头添加的行，它仍然有效。现在我能想到的有两件事：第一；一旦我添加 window.Jquery = require('jquery'); 并开始 npm run dev 对我的一个文件做了一些事情并且删除该行现在并不重要，或者这里没有发生任何特别的事情我只是在打开这个主题之前做了一些非常错误的事情。谢谢。

Laravel 6-Bootstrap 为什么在没有错误的情况下Popover 不起作用？

Laravel 6-Bootstrap Why Popover doesn't work while there is no error?

javascript

jquery

bootstrap-4

popover

laravel-6