我的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>
@评论提供的随机解决方案有效-脚本顺序错误。