如何使用 jquery 在 Bootstrap 5 中创建和修改弹出框？答案

【问题标题】：How do you create and modify popover in Bootstrap 5 using jquery?如何使用 jquery 在 Bootstrap 5 中创建和修改弹出框？
【发布时间】：2021-09-12 14:12:35
【问题描述】：

有人知道我如何通过 javascript/jquery 创建和添加数据到 bootstrap 5 弹出框吗？

使用 bootstrap 3 我能够做到这一点：

$('#element').popover({ placement : 'left', trigger : 'focus', html: true });
let content_template = `<h1>Hello World!</h1>`;
$('#element').data('bs.popover').options.content = content_template;

但我不知道如何使用 bootstrap 5 做同样的事情。文档没有提到任何关于此的内容。有谁知道 BS5 中如何管理弹出框？

【问题讨论】：

您应该设法从 Bootstrap 5 项目中消除 jQuery（除非您必须支持可笑的旧浏览器）。它已经过时了，并且在现代应用程序中被广泛认为已过时。

标签： javascript jquery popover bootstrap-5

【解决方案1】：

您需要获取 popover 的实例，然后使用 popover_instance._config.content ="some message" 在您的 popover 中设置新内容。

演示代码：

new bootstrap.Popover(document.querySelector('[data-bs-toggle]'), {
  placement: 'left',
  trigger: 'focus',
  html: true
})
//get instance
var popover_instance = bootstrap.Popover.getInstance(document.querySelector('[data-bs-toggle]'))
let content_template = `<h1>Hello World!</h1>`;
popover_instance._config.content = content_template;//set content

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title">Click to toggle popover</button>

【讨论】：

谢谢。显然它不再支持弹出框内的
了？当我尝试添加以下内容时，我只是得到一个没有内容的空白弹出框：let content_template = <table><tr><th>Testing</th></tr><tr><td>Something</td></tr></table>;
这是一个不同的问题，你不应该在这里提出。
如果有人遇到同样的问题，您需要在创建弹出框时设置 sanitize: false。

【解决方案2】：

如果您计划多次更新弹出框内容，您还需要在弹出框实例上调用setContent()。像这样

popoverInstance._config.content = "Hello world";
popoverInstance.setContent();

【讨论】：

【解决方案3】：

popover 实例是从实例化中返回的。然后您可以使用它来修改内容...

const bsPopover = new bootstrap.Popover(document.querySelector('[data-bs-toggle]'), {
  placement: 'left',
  trigger: 'focus',
  html: true
})

bsPopover._config.content = `<h1>Hello World!</h1>`

Demo

【讨论】：