包含html链接的Bootstrap弹出窗口只显示一次

基础概念

Bootstrap 弹出窗口（Popover）是一种常用的 UI 组件，用于在用户点击或悬停时显示额外的信息。它通常通过 HTML 内容、标题和触发方式来配置。

类型与应用场景

点击触发：适用于需要用户主动操作以获取信息的场景。
悬停触发：适用于快速查看信息的场景。

常见问题及原因

问题描述：包含 HTML 链接的 Bootstrap 弹出窗口只显示一次。

可能的原因：

JavaScript 错误：可能是由于 JavaScript 代码中的错误导致弹出窗口无法正常工作。
事件绑定问题：事件可能没有正确绑定到元素上，导致后续点击无法触发弹出窗口。
缓存问题：浏览器缓存可能导致某些脚本没有重新加载。

解决方案

步骤一：检查 HTML 结构

确保你的 HTML 结构正确，并且包含了必要的 Bootstrap 和 Popover 相关的类和属性。

<button type="button" class="btn btn-secondary" data-toggle="popover" title="Popover title" data-content='<a href="https://example.com">Link</a>'>
  Click to toggle popover
</button>

步骤二：初始化 Popover

使用 JavaScript 初始化 Popover。

$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        html: true, // 允许 HTML 内容
        placement: 'top' // 弹出窗口的位置
    });
});

步骤三：确保脚本正确加载

检查是否所有必要的 Bootstrap 和 jQuery 脚本都已正确加载。

<!-- 引入 Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- 引入 Bootstrap JS 和 Popper.js -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

步骤四：调试 JavaScript

打开浏览器的开发者工具，查看控制台是否有任何错误信息，并根据错误信息进行相应的调整。

示例代码

以下是一个完整的示例，展示了如何创建一个可以多次显示的包含 HTML 链接的 Bootstrap Popover。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Popover Example</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<button type="button" class="btn btn-secondary" data-toggle="popover" title="Popover title" data-content='<a href="https://example.com">Link</a>'>
  Click to toggle popover
</button>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        html: true,
        placement: 'top'
    });
});
</script>

</body>
</html>

通过以上步骤，你应该能够解决包含 HTML 链接的 Bootstrap 弹出窗口只显示一次的问题。如果问题仍然存在，请检查是否有其他 JavaScript 代码干扰了 Popover 的正常工作。