jquery 与 bootstrap4 一起使用时未定义 popperjs 行 2325

Question

我正在使用 bootstrap 4.0 beta，它需要 popperjs，即 v1.12.5。 jQuery 是 3.2.1 版本，处于 jQuery.noConflict() 模式。这是针对 shopify 主题的，因此要包含 javascript 文件，它在 Shopify 的 Slate 命令行工具中使用 gulp-include 指令。我的包含文件如下所示：

// =require vendor/jquery-3.2.1.js
// =require vendor/popper.js
// =require vendor/bootstrap.min.js

当我尝试使用 Bootstrap 导航栏下拉开关时，出现控制台错误

Uncaught TypeError: Cannot read property 'jquery' of undefined

jQuery 在所有非 popper bootstrap 功能和自定义 jQuery javascript 中正常工作。但是，当我在控制台中键入 jquery（带有小写的 q）时，它没有被定义，但这是 popperjs 在第 2325 行使用的内容。如果我编辑 popperjs 源并将 q 大写，它仍然会抛出同样的错误。

Answer 1

您正在以某种方式将无效的 DOM 元素传递给 Popper.js，如果您将 Popper.js 更新到最新版本，您将收到更好的错误消息。

Answer 2

有关更多上下文，您收到此错误是因为您试图使用无效的 HTML 元素作为下拉按钮。我收到此错误是因为我尝试使用一个锚标记，其中嵌套了一个按钮，旁边是 .dropdown-menu div

例如这行得通

<button class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
</button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Thing 1</a>
    <a class="dropdown-item" href="#">Thing 2</a>
    <a class="dropdown-item" href="#">Thing 3</a>
  </div>

但这不是

<a class="dropdown">
<button class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
</button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Thing 1</a>
    <a class="dropdown-item" href="#">Thing 2</a>
    <a class="dropdown-item" href="#">Thing 3</a>
  </div>
</a>

jquery 与 bootstrap4 一起使用时未定义 popperjs 行 2325

jquery is not defined popperjs line 2325 when used with bootstrap4

javascript

jquery

twitter-bootstrap

bootstrap-4

popper.js