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

Posted 2023-03-14

【中文标题】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

【参考方案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