Bootstrap 4 popper 未定义

2023-12-11

我正在尝试启动下拉菜单,每当我单击按钮时,我就会得到TypeError: popper is undefined.

我尝试导入捆绑包而不是bootstrap

// import "bootstrap";
import 'bootstrap/dist/js/bootstrap.bundle.js';

我尝试导入jquery first

import "jquery";
import "bootstrap";

我也尝试导入 popper

import "popper.js/dist/umd/popper.min.js";
import "jquery";
import "bootstrap";

我还尝试在任何其他脚本之前包含来自 CDN 的 popper

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

我尝试了上述导入的任何组合,仍然收到此错误,即使我可以访问Popper在控制台中。

<div class="d-flex justify-content-between dropdown luri-eayq">
   <a href="/messages" class="btn btn-light flex-1 py-3 rounded-0">
      Messages
   </a>
   <a href="/phonebook" class="btn btn-light flex-1 py-3 rounded-0">
      Phonebook
   </a>
   <button id="dd" class="btn btn-light flex-1 py-3 rounded-0 mt-0" data-toggle="dropwdown">
      More
   </button>
   <div class="dropdown-menu"><a class="dropdown-item" href="/problems">Problems</a></div>
</div>

然后我调用以下内容,因为它是动态生成的元素

$("#dd").dropdown();

我的问题与建议的不同,因为我解释说我已经尝试了所有建议的解决方案,但没有一个有效。


解决方案:

您可以通过导入来使用捆绑的 bootstrap popper

<script src="/js/bootstrap.bundle.min.js"></script>

查看文档here.

或者使用UDMpopper 的版本,请参阅下面的详细信息。

波普尔的使用步骤

我喜欢包管理器。所以这里是:

npm init

只要对一切说“是”..

npm install bootstrap --save
npm install jquery --save
npm install popper.js --save

我使用index.html文件创建了两个文件夹js和css,如下所示:

 index.html
 package.json
 package-lock.json
 |_ js
 |_ css
 |_ node_modules
     |_ bootstrap
       |_ dist
     |_ jquery
       |_ dist
     |_ popper.js
       |_ dist
          |_udm
          |_esm

然后,我将文件从位于 node_modules 中的各个库中的 dist 文件夹复制到 css 和 js 文件夹。除了波普尔之外,使用位于 dist/udm 文件夹中的 popper.js 文件或 popper.min.js 文件

index.html文件内容如下:

<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <title>Popper Test</title>
        <link rel="stylesheet" href="/css/bootstrap.min.css">
    </head>

    <body>

            <div class="dropdown">
                    <button class="btn btn-secondary 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="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                  </div>

        <script src="/js/jquery.min.js"></script>
        <script src="/js/popper.js"></script>
        <script src="/js/bootstrap.min.js"></script>
        <!-- <script src="/js/bootstrap.bundle.min.js"></script> -->
    </body>
</html>

运行我使用的示例: 找到 http 服务器here通过跑步

npm install http-server -g
http-server

如果您还没有使用UDM版本那么打开 chrome 并转到http://127.0.0.1:8080。打开我的页面,按 F12,然后尝试按下拉菜单失败,并显示错误消息:

bootstrap.min.js:6 Uncaught TypeError: Bootstrap's dropdowns require Popper.js (https://popper.js.org/)
    at c.t.toggle (bootstrap.min.js:6)
    at HTMLButtonElement.<anonymous> (bootstrap.min.js:6)
    at Function.each (jquery.min.js:2)
    at w.fn.init.each (jquery.min.js:2)
    at w.fn.init.c._jQueryInterface [as dropdown] (bootstrap.min.js:6)
    at HTMLButtonElement.<anonymous> (bootstrap.min.js:6)
    at HTMLDocument.dispatch (jquery.min.js:2)
    at HTMLDocument.y.handle (jquery.min.js:2)

要么使用UDM上述版本或捆绑引导版本,通过切换:

<script src="/js/jquery.min.js"></script>
<script src="/js/popper.js"></script>
<script src="/js/bootstrap.min.js"></script>
<!-- <script src="/js/bootstrap.bundle.min.js"></script> -->

to :

<script src="/js/jquery.min.js"></script>
<!-- <script src="/js/popper.js"></script> -->
<!-- <script src="/js/bootstrap.min.js"></script>-->
<script src="/js/bootstrap.bundle.min.js"></script>

Works.

实施的版本是:

  • 引导程序: 4.2.1
  • jquery: 3.3.1
  • 波普尔.js: 1.14.6
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Bootstrap 4 popper 未定义 的相关文章

  • 防止垃圾邮件按钮呼叫功能

    如何防止调用函数时出现垃圾邮件按钮 就像用户只能在按钮上每 1 秒调用一次该函数 有办法做到吗 因为我尝试了 setTimeout 但没有成功 它仍然在发送垃圾邮件 顺便说一句 我使用 Jquery 这是我的代码
  • 如何使用有角度的材料创建卡片网格?

    我正在尝试使用 ng repeat 创建每行三张卡片的网格 我有一个普通的 javascript 对象数组附加到范围 下面的代码将为每张卡创建一个新行 div div
  • 通过 JavaScript 获取表单名称

    我有一个简单的问题 但我在网上找不到好的解决方案 我有这个 HTML 代码
  • 想要动态处理与分页相关的页码显示:ReactJS

    我有一些分页逻辑工作得很好 唯一的问题是我只能让它显示并固定数量的页面可供选择 现在我已经把它放到了 5 页 但我希望它能够根据总记录动态更改 假设我有 100 条记录 每页限制为 10 条 将有 10 页 现在我只能让它以这种方式显示 第
  • 如何在网站上使用 svg 元素制作块的屏幕截图?

    我在网站上创建了一个构造函数 其本质是将所选元素及其颜色 svg中的元素 添加到访问者选择的背景和背景颜色 png中的背景 中 然后必须单击 保存 结果 按钮并仅执行工作区的屏幕截图 我写了这个脚本 但它需要屏幕截图 但只有背景 并忽略选定
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • 如何使用 Scrapy 从网站获取所有纯文本?

    我希望在 HTML 呈现后 可以从网站上看到所有文本 我正在使用 Scrapy 框架使用 Python 工作 和xpath body text 我能够获取它 但是带有 HTML 标签 而且我只想要文本 有什么解决办法吗 最简单的选择是ext
  • ReactTransitionGroup 不适用于 React-redux 连接组件

    我正在开发一个更大的项目 但我创建了这个简短的示例来说明问题 如果我使用Box组件 它的工作原理 它在控制台中输出componentWillEnter and componentWillLeave当我们点击按钮时 如果我使用BoxConta
  • 如何使用 Greasemonkey 监视静态 HTML 页面的更改?使用哈希?

    我希望我的 Greasemonkey 脚本仅在其访问的静态页面具有与以前完全相同的内容时运行 现在我可以设置一个包含该页面哈希的变量 我正在寻找一种动态散列页面的方法 以便我可以将我的散列与生成的散列进行比较 关于如何即时实现散列的任何想法
  • 将 Firebase 云消息传递与 Windows 应用程序结合使用

    我在 Android 和 iOS 应用程序中使用 Firebase Cloud Messaging 但是我还有此应用程序的 Windows Mac OS 版本 我想保留相同的逻辑 我知道 Firebase Cloud Messaging 可
  • mongodb 聚合 - 累积字段的不同组值

    如果我有Player表格文件 name String score Int 我有Group文档 其中组代表玩家列表 groupName String players ObjectID 玩家可以属于多个组 我想做一个聚合Player文档 按以下
  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 具有 100% 高度行和 Internet Explorer 9 的表格

    我有以下示例 div style height 150px background color AAAAFF div
  • LeafleteachLayer函数不会迭代所有Layer

    使用 GeoJSON 数据数组创建一些标记 getJSON GetLocationsServlet function data L geoJSON data onEachFeature onEachFeature addTo mymap G
  • 使用 Javascript 设置 cookie [重复]

    这个问题在这里已经有答案了 我正在尝试构建我的第一个移动应用程序 它需要连接到我的 mysql 数据库并使用 json 返回数据 这很好 目前我有一个登录系统 一旦确定用户名和密码存在 它就会返回一条成功消息 对于下一步 我想在我的页面上使
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小
  • Flot 库将 y 轴设置为最小值 0 和最大值 24

    如何将 y 轴设置在 0 到 24 的范围内 这是我的代码 j plot j placeholder d1 xaxis mode time min new Date 2010 11 01 getTime max new Date 2011
  • 仅当显式选择行时才关闭 ui-bootstrap typeahead

    我创建了这个jsBin http jsbin com livuqafe 2 edit来证明我遇到的问题 如果您转到此处 请尝试输入 五 并继续 你的自然反应是输入 五 然后按 Tab 如果你想要 五百 你可以向下箭头一次 但是 在这种情况下
  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供

随机推荐

  • android 手机启动时启动 Activity

    我试图在手机启动时启动活动 但整个程序没有运行 程序中没有错误 请参阅下面的编码 或此处http pastebin com BKaE4AaU 自动启动 java import android content BroadcastReceive
  • 使用 LINQ 自定义排序

    看来我错过了一些微不足道的事情 无论如何 事情是这样的 var order new 1 3 2 var foos new new Foo Id 1 new Foo Id 2 new Foo Id 3 如何使用 Linq 按顺序数组对 foo
  • Angular 4.0 http put 请求

    我编写了一个函数来发送 http put 请求来更新一些数据 但它说它没有收到任何数据 updateHuman human Human const url this url human id const data JSON stringif
  • 如何使用访问权限和密钥来访问 Google Cloud Storage

    我拥有 Google Cloud Storage 的访问权限和密钥 并且我想使用这些凭据实例化客户端 我一直在查看教程并遇到了这个示例 public class QuickstartSample public static void mai
  • 如何在 C 预处理器中生成唯一值?

    我正在编写一堆相关的预处理器宏 其中一个生成标签 另一个宏则跳转到该标签 我以这种方式使用它们 MAKE FUNNY JUMPING LOOP MAKE LABEL MAKE LABEL 我需要某种方法来生成独特的标签 每个内部标签一个MA
  • 如何注册 OMX 核心以添加新解码器

    我指的是帖子 Android 如何将解码器集成到多媒体框架 接下来我注册了我的新解码器 Android 目前不支持 media codecs xml 上述帖子的步骤 2 需要我执行OMX核心注册 但是 由于我对这个主题非常陌生 所以我无法遵
  • 为什么我的 onclick 事件没有在 Firefox 中注册?

    我有一个列表项onclick事件 它可以在 Chrome 和 Internet Explorer 中运行 但不能在 Firefox 中运行 有什么建议么 li test test br li 这对我来说在 Firefox 中工作得很好 检查
  • PyQt 是否有相当于 Toastr 的工具?

    我正在开发我的第一个 PyQt 项目 我想想出一种方法 在用户完成任务时向他们提供成功或错误消息 过去 我用过 JavascriptToastr我很好奇 Python 应用程序是否有类似的东西 我考虑过在 PyQt 中使用 QDialog
  • ld:在带有 gcc/clang -static 标志的 OSX 10.6 上找不到 -lcrt0.o 的库

    当我尝试构建以下程序时 include
  • 使用 SWR 从内部 API 路由获取客户端数据

    我正在尝试在 Next js 应用程序中获取 API 路由中的数据 但它不起作用 这是我在 API 路径上获取数据的代码 import nc from next connect const jobHandler nc jobHandler
  • 通用接口中的协变

    我想创建一个可排序的 observableCollection 所以我开始创建一个继承 observable 的类 并使用一些方法对其进行排序 然后我希望该类将索引保留到子类中 因此我创建了一个接口 该接口公开了我可以写入的索引属性 并且我
  • Xcode 无法安装“Runner”代码:-402620392(Flutter 应用程序)

    XCode 版本 11 1 11A1027 颤振版本1 17 5 我尝试在 iPad 12 4 6 上运行我的 Flutter 应用程序 它构建时没有错误 但在安装步骤中显示消息 Unable to install Runner Domai
  • get set 对于简单变量有什么好处[重复]

    这个问题在这里已经有答案了 可能的重复 公共字段与自动属性 我认为这个问题会在某个地方得到解答 但我在通常的地方找不到它 我想知道这样做有什么好处 private int foo public int foo get return foo
  • 不同的 Spring 注解 XML 声明

    似乎有多个 XML 标签告诉 Spring 使用注释
  • HTML5 使用 src 使用原始二进制数据

    假设我正在数据库中存储一个音频文件 稍后我想在我的应用程序中使用该 BLOB 或二进制文件
  • 如何访问 pybluez 中的蓝牙低级功能?

    是否有用于较低级别 bt 功能的 pybluez 包装函数 我在文档中找不到任何内容 我需要使用与以下功能等效的功能 l2ping single ping hcitool cc hcitool rssi hcitool lq hcitool
  • 不同窗口中两个文本框之间的数据绑定

    我创建了一个程序 在选中或取消选中复选框时更改文本框中的名称 我想在不同的窗口中复制这个文本框 我认为在 xaml 中使用数据挖掘是可能的 但名称仅出现在一个窗口中 第二个窗口窗口不接收数据 我向您展示了两个窗口的代码 你能帮助我吗 谢谢
  • IE 中的上标下划线

    由于时间有限 我的发言会很简短 所以如果没有我希望的那么详细 我深表歉意 我有一些代码 print a href Some text a
  • 从类路径目录获取资源列表

    我正在寻找一种方法来从给定的类路径目录中获取所有资源名称的列表 类似于方法List
  • Bootstrap 4 popper 未定义

    我正在尝试启动下拉菜单 每当我单击按钮时 我就会得到TypeError popper is undefined 我尝试导入捆绑包而不是bootstrap import bootstrap import bootstrap dist js b