Laravel 'popper.js is null' 当单击具有类'input-group-prepend'的引导程序 4 div 时答案

【问题标题】：Laravel 'popper.js is null' when clicking on a bootstrap 4 div with class 'input-group-prepend'Laravel 'popper.js is null' 当单击具有类'input-group-prepend'的引导程序 4 div 时
【发布时间】：2020-04-13 16:17:28
【问题描述】：

当我单击由类 input-group-prepend 的 div 包围的元素时，我在控制台中收到以下错误：

TypeError: popper is null app.js:50778:3

如果我删除周围的 div，点击功能可以工作，但出于 UI 原因我需要 div。

元素

...
<div class="input-group-prepend">
   <button class="btn btn-outline-secondary dropdown-toggle"
           type="button" data-toggle="dropdown"
           aria-haspopup="true" aria-expanded="false">Filter
   </button>
</div>
...

jquery点击功能

...
$(".dropdown-item-container").click(function(event) {
  event.stopPropagation();
  console.log($(this));
});
...

我的猜测是我没有正确地将popper.js 包含在boostrap.js 中。

我的bootstrap.js 文件：

...
try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}
...

我尝试了此处描述的一些看似相关的解决方案，但我无法让它们发挥作用：Can't load popper.js with webpack and Laravel mix。

我用：

Laravel 版本：6.7.0
Popper.js 版本：^1.16.0
Bootstrap 版本：^4.0.0

【问题讨论】：

标签： jquery laravel bootstrap-4 popper.js

【解决方案1】：

我发现了一个奇怪但很容易解决的问题。出于某种原因，当我将data-toggle="dropdown" 放在周围的div 而不是button 上时，下拉菜单有效，但我没有收到错误。

...
<div class="input-group-prepend" data-toggle="dropdown">
   <button class="btn btn-outline-secondary dropdown-toggle"
           type="button"
           aria-haspopup="true" aria-expanded="false">Filter
    </button>
</div>
...

我不知道为什么会这样，也不是Bootstrap 文档规定的创建下拉菜单的方式，但它仍然有效。

【讨论】：

【解决方案2】：

默认情况下，div.dropdown-menu 应该是 button[data-toggle="dropdown"] 的兄弟。也许这就是问题所在。

如果您不想更改 HTML 结构，则必须在下拉选项中定义 reference 设置（例如 data-reference="parent"）。见https://getbootstrap.com/docs/4.4/components/dropdowns/#options

【讨论】：