引导弹出窗口无法正常工作且没有错误答案

【问题标题】：Bootstrap popover not working with no error引导弹出窗口无法正常工作且没有错误
【发布时间】：2021-06-21 07:05:10
【问题描述】：

我正在使用 bootstrap 5 创建一个网站，我想要一个按钮，当用户单击它时会出现一个弹出框。

我已将 jQuery 和 popper.js 文件添加到我的文件中。但是，当我单击按钮时，什么也没有发生。我检查了控制台，它似乎没有显示任何错误。我不知道出了什么问题。

这是我的按钮代码。

  <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus."><i class="fas fa-shopping-cart" style="color: #fff;">
  Cart </i>
</button>

这是我的 jQuery 代码

$(document).ready(() => {
    $('[data-toggle="popover"]').popover();   
  });

这是我链接的 jQuery 和 popper.js 文件。

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

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

我想知道我是否链接了错误版本的文件，因为引导网站在这方面没有太大帮助。

【问题讨论】：

在引导之前加载 jquery
不能解决问题
试试$(document).ready(function() { 箭头函数有时会出问题
也试过了，还是有同样的问题。
您确定控制台中没有警告或错误吗？

标签： javascript html jquery twitter-bootstrap bootstrap-5

【解决方案1】：

将data-* 属性更改为data-bs-*（例如：data-toggle 到 data-bs-toggle 等等）并将脚本更改为下面提供的脚本以打开弹出框。

此外，请确保您正确包含Bootstrap assets，一切都应该没问题。在您的情况下，您没有包含引导 css 文件，因此弹出框将显示为 no style。您可以再次查看下面的 sn-p 了解更多详细信息。

<html>

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

</head>

<body>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus."><i class="fas fa-shopping-cart" style="color: #fff;">
  Cart </i>
</button>





<script>

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

</script>

</body>


</html>

【讨论】：

bootstrap css链接在文件开头，我这里没有展示