ruby-on-rails - 如何在 Webpack Rails 项目中初始化 Bootstrap Popover
问题描述
因此,我遵循了有关谁启动 popover 的引导文档,但它不起作用。它抛出了这个错误。我该如何解决?
Uncaught TypeError: bootstrap.Popover is not a constructor
这些是代码。
test_popover.html
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title"
data-bs-content="And here's some amazing content. It's very engaging. Right?">
Click
</button>
test_popover.js
...
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
我已在 packs/application.js 中导入引导程序
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
// Import Bootstrap only ones that are used to reduce size
import 'bootstrap';
import '../javascripts/test_popover';
解决方案
这就是我修复它的方法。我导入Popover
并从新更改bootstrap.Popover()
为new Popover()
import Popover from 'bootstrap/js/dist/popover';
document.addEventListener("turbolinks:load", function() {
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new Popover(popoverTriggerEl)
})
});
推荐阅读
- python - python tkinter添加多个组合框值显示问题
- java - 我怎样才能使视频也能与视觉一起正常工作?
- linux - 在运行时扩展 rootfs 分区
- javascript - 如何使用 javascript 将查询字符串 URL 中的哈希 (#) 更改为另一个标识符?
- android - 如何在代码中将文本设置为 LinearLayout 中的 TextView?
- python - 创建一个奇数列表
- tensorflow - 在 Windows 10 上安装 tf-models-official
- reactjs - SAS 密钥权限在使用 blobserviceclient 时发生变化
- python - ImportError:没有名为密码学的模块
- java - CameraX:setTargetResolution() 在某些设备上不起作用