Bootstrap Popover初始化后仍无法显示(疑似脚本标签问题?)
解决Bootstrap Popover无法显示的问题
看起来你遇到的问题主要出在资源加载顺序错误和错误的资源引入方式上,咱们一步步来修复:
1. 修正错误的Popper.js引入方式
你用<link>标签引入了Popper.js,但它是JavaScript文件,必须用<script>标签。而且更重要的是:Bootstrap 3.3.7并不需要Popper.js——Popper是Bootstrap 4及以上版本才依赖的组件,所以这个引入完全可以删掉(如果后续不升级Bootstrap的话)。
2. 调整资源加载顺序(关键!)
所有依赖jQuery的脚本(比如star-ratings、Bootstrap、jQuery UI)必须在jQuery之后加载,否则会因为找不到jQuery而失效。正确的顺序应该是:
- 样式表(CSS)按顺序加载
- jQuery
- 依赖jQuery的脚本(jQuery UI、star-ratings、Bootstrap JS)
修正后的资源标签应该是这样的:
<!-- Bootstrap CSS --> <link href="../static/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- Fonts--> <link href="https://fonts.googleapis.com/css?family=Open+Sans|Prosto+One&display=swap" rel="stylesheet"> <!-- Theme style --> <link rel="stylesheet" href="../static/bootstrap/css/style.css"> <!--star ratings CSS--> <link rel="stylesheet" href="{% static 'star-ratings/css/star-ratings.css' %}"> <!-- jQuery UI CSS --> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <!-- jQuery 必须放在最前面 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- jQuery UI --> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- JS Cookies --> <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script> <!-- star ratings JS --> <script type="text/javascript" src="{% static 'star-ratings/js/dist/star-ratings.min.js' %}"></script> <!-- Bootstrap JS --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
3. 确保Popover初始化代码在DOM加载完成后执行
你的初始化代码$('[data-toggle="popover"]').popover();必须放在DOM完全加载之后,或者放在$(document).ready()回调里,避免因为元素还没渲染就执行初始化:
$(document).ready(function() { // 初始化Popover,还可以自定义配置 $('[data-toggle="popover"]').popover({ placement: 'top', // 可选:指定弹窗位置 trigger: 'hover' // 可选:触发方式,比如hover/click }); });
4. 检查按钮的HTML属性是否正确
确保你的按钮有正确的data属性,比如:
<button type="button" class="btn btn-default" data-toggle="popover" title="弹窗标题" data-content="这是弹窗内容"> 点击显示弹窗 </button>
做完这些调整后,应该就能正常显示Popover了。如果还是有问题,可以打开浏览器的开发者工具(F12)查看控制台有没有报错,这能帮你快速定位剩余的问题。
内容的提问来源于stack exchange,提问作者Patrycja
相关产品推荐
相关产品推荐

