javascript - 弹出窗口不显示在 Bootstrap 中
问题描述
我的 html 文件中有这段代码:
<a href="#" class='nav-link m-2 menu-item' style="color:#ceaa63" data-placement="bottom" data-toggle="popover" data-title="Title" data-content="Some content">
<i class="fas fa-shopping-cart pr-1"></i>Cart
</a>
<script>
$(function(){
$('[data-toggle="popover"]').popover()
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
点击购物车弹出后不显示。这段代码有什么问题?
解决方案
在加载脚本文件之前,您正在访问popover
和依赖函数。jquery
加载文件后,将脚本文件放在最后jquery, popover and bootstrap.min.js
。
(function() {
$('[data-toggle="popover"]').popover()
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<a href="#" class='nav-link m-2 menu-item' style="color:#ceaa63" data-placement="bottom" data-toggle="popover" data-title="Title" data-content="Some content">
<i class="fas fa-shopping-cart pr-1"></i>Cart
</a>
推荐阅读
- ios - 我将如何让 Text 代表另一个视图中的变量(swiftUI)
- angular - 强制角度尊重 json 中的接口类型
- java - Dagger 2 组件类未生成
- node.js - 在 AWS lambda(Node.JS 运行时)上执行 AWS-CLI 命令
- python - PyCharm 调试器卡在“收集数据”上
- reactjs - makeStyle 不适用于自定义组件
- python - 在 Python 中将 datetime 转换为 protobuf Timestamp
- python - 将 RDD 转换为数据帧在字符串到日期转换时失败
- c# - 根据主键从数据库中过滤后,值变为空 - C# Winforms
- flutter - Flutter - 单击 FCM 推送通知时,当应用程序是后台时,默认情况下它不会启动应用程序