Laravel 'popper.js is null' 当点击 bootstrap 4 div 和 class 'input-group-prepend'

Question

当我单击被 div 和 class input-group-prepend:

包围的元素时，我在控制台中收到以下错误

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));
});
...

我的猜测是我没有在 boostrap.js 中正确包含 popper.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

Answer 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 文档也没有规定如何创建下拉菜单，但它仍然有效。

Answer 2

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

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

Laravel 'popper.js is null' 当点击 bootstrap 4 div 和 class 'input-group-prepend'

Laravel 'popper.js is null' when clicking on a bootstrap 4 div with class 'input-group-prepend'

jquery

laravel

bootstrap-4

popper.js