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

【问题标题】：Laravel 6-Bootstrap Why Popover doesn't work while there is no error?Laravel 6-Bootstrap 为什么在没有错误的情况下 Popover 不起作用？
【发布时间】：2020-06-25 15:14:30
【问题描述】：

我目前正在通过开发应用程序来学习 laravel。我在后端做了很多事情，但是当我遇到前端问题时仍然很艰难。我正在使用引导脚手架并想在“弹出框”中创建一个表单。我可以稍后再做，现在我只想解决这个按钮。我使用引导站点中显示的弹出框。 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…

提前致谢。

【问题讨论】：

标签： javascript jquery bootstrap-4 popover laravel-6

【解决方案1】：

一年后编辑：我继续进行网络开发，当我在我的历史中看到这个主题时，我产生了好奇和阅读。当我看到问题时，我可以想象这个问题以及它当时不起作用的原因是 jquery 需要在 popper.js 和 bootstrap 之前导入或需要。我应该明白，在插入 CDN 之后（只需查看订单）。以下文字属于一年前，没有任何有意义的解释。

好的，问题以一种我不明白的非常有趣的方式解决了。如果您仍有想法，请分享您的 cmets。我删除了所有 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对我的一个文件做了一些事情并且现在删除那一行并不重要，或者这里没有发生什么特别的事情，我只是在opennig这个话题之前做了一些错误的事情。谢谢。

【讨论】：

【解决方案2】：

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

也许您可以发布引导程序和应用程序 js 文件中的代码？

【讨论】：

我真的很抱歉这么晚才回复。在资源/js/bootstrap.jstry { window.Popper = require('popper.js').default; window.$ = window.jQuery = require('jquery'); require('bootstrap'); } catch (e) {}public/js/app.js:window.Popper = __webpack_require__("./node_modules/popper.js/dist/esm/popper.js")["default"]; __webpack_provided_window_dot_$ = __webpack_provided_window_dot_jQuery = __webpack_require__( "./node_modules/jquery/dist/jquery.js"); __webpack_require__("./node_modules/bootstrap/dist/js/bootstrap.js");