我正在使用 bootstrap-popover 在元素旁边显示一条消息。
如果我想在第一次之后在弹出窗口中显示不同的文本，文本不会改变。使用新文本重新实例化弹出框不会覆盖。
请参阅此 js fiddle 以获取实时示例：
（第一次点击后alert中的消息和dom中的消息不一致）文档对如何解绑有点轻描淡写：http: //twitter.github.com/bootstrap/javascript.html#popovers
我用错了吗？关于如何解决的任何建议？
谢谢
问问题
78401 次
11 回答
82
您可以使用 jquery 数据闭包字典直接访问选项，如下所示：
$('a#test').data('bs.popover').options.content = 'new content';
即使在第一次初始化弹出框之后，此代码也应该可以正常工作。
于 2012-07-03T12:10:37.483 回答
59
您好，请在此处查看工作演示：http : //jsfiddle.net/4g3Py/1/
我已经进行了更改以获得您想要的结果。:)
我想你已经知道你在做什么，但是我的一些示例建议如下：http: //dl.dropbox.com/u/74874/test_scripts/popover/index.html# - 分享这个链接给你如果您会看到源通知属性data-content，但您想要的内容通过以下更改起作用，则具有不同弹出窗口的不同链接的想法。
有一个不错的，希望这会有所帮助。D'uh 不要忘记投票并接受答案:)
jQuery代码
var i = 0;
$('a#test').click(function() {
i += 1;
$('a#test').popover({
trigger: 'manual',
placement: 'right',
content: function() {
var message = "Count is" + i;
return message;
}
});
$('a#test').popover("show");
});
HTML
<a id="test">Click me</a>
于 2012-04-19T12:11:32.217 回答
25
以防万一有人在寻找不涉及重新实例化的解决方案popover并且只想更改内容 html，请看一下：
$('a#test').data('popover').$tip.find(".popover-content").html("<div>some new content yo</div>")
更新：在编写此答案和 Bootstrap 3.2.0（我怀疑是 3.0？）之间的某个时刻，这发生了一些变化，变为：
$('a#test').data('bs.popover').tip().find ............
于 2012-09-11T11:14:15.303 回答
17
老问题，但由于我注意到没有答案提供了正确的方法，这是一个常见问题，我想更新它。
使用$("a#test").popover("destroy");- 方法。在这里拉小提琴。
这将破坏旧的弹出框，并使您能够以常规方式再次连接新的弹出框。
这是一个示例，您可以单击按钮在已附加弹出框的对象上设置新的弹出框。有关更多详细信息，请参见小提琴。
$("button.setNewPopoverContent").on("click", function(e) {
e.preventDefault();
$(".popoverObject").popover("destroy").popover({
title: "New title"
content: "New content"
);
});
于 2014-01-21T16:13:53.253 回答
9
这个问题已有一年多的历史了，但也许这对其他人有用。
如果仅在隐藏弹出框时更改内容，我发现的最简单方法是使用函数和一些 JS 代码。
具体来说，我的 HTML 如下所示：
<input id="test" data-toggle="popover"
data-placement="bottom" data-trigger="focus" />
<div id="popover-content" style="display: none">
<!-- Hidden div with the popover content -->
<p>This is the popover content</p>
</div>
请注意，没有指定数据内容。在 JS 中，当创建 popover 时，会使用一个函数来处理内容：
$('test').popover({
html: true,
content: function() { return $('#popover-content').html(); }
});
现在您可以更改 popover-content div 的任何位置，并且 popover 将在下次显示时更新：
$('#popover-content').html("<p>New content</p>");
我想这个想法也可以使用纯文本而不是 HTML。
于 2013-11-30T15:11:57.067 回答
5
在 Boostrap 4 上只有一行：
$("#your-element").attr("data-content", "your new popover content")
于 2020-01-23T15:47:34.293 回答
4
你总是可以直接修改 DOM：
$('a#test').next(".popover").find(".popover-content").html("Content");
例如，如果您想要一个弹出框，它将从 API 加载一些数据并在悬停时将其显示在弹出框的内容中：
$("#myPopover").popover({
trigger: 'hover'
}).on('shown.bs.popover', function () {
var popover = $(this);
var contentEl = popover.next(".popover").find(".popover-content");
// Show spinner while waiting for data to be fetched
contentEl.html("<i class='fa fa-spinner fa-pulse fa-2x fa-fw'></i>");
var myParameter = popover.data('api-parameter');
$.getJSON("http://ipinfo.io/" + myParameter)
.done(function (data) {
var result = '';
if (data.org) {
result += data.org + '<br>';
}
if (data.city) {
result += data.city + ', ';
}
if (data.region) {
result += data.region + ' ';
}
if (data.country) {
result += data.country;
}
if (result == '') {
result = "No info found.";
}
contentEl.html(result);
}).fail(function (data) {
result = "No info found.";
contentEl.html(result);
});
});<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a href="#" id="myPopover" data-toggle="popover" data-title="IP Details" data-api-parameter="151.101.1.69">Hover here for details on IP 151.101.1.69</a>这假设您信任 API 提供的数据。如果没有，您将需要转义返回的数据以减轻 XSS 攻击。
于 2016-08-18T23:47:36.280 回答
1
不要从以前的答案中学习
let popOverOptions = {
trigger: 'click',
...
};
// save popOver instance
let popOver = $(`#popover-unique-id`).popover(popOverOptions);
// get its data
let popOverData = popOver.data('bs.popover');
// load data dynamically (may be with AJAX call)
$(`#popover-unique-id`).on('shown.bs.popover', () => {
setTimeout(() => {
// set content, title etc...
popOverData.config.content = 'content/////////';
// updata the popup in realtime or else this will be shown next time opens
popOverData.setContent();
// Can add this if necessary for position correction:
popOver._popper.update();
}, 2000);
});
这样我们就可以轻松更新弹出框内容。
还有另一种使用方法的destroy方法。
http://jsfiddle.net/bj5ryvop/5/
于 2020-06-06T07:17:41.817 回答
0
我发现Bootstrap 弹出内容不能动态更改，这引入了该setContent功能。因此，我的代码（希望对某人有所帮助）是：
（注意 jquery data() 并不擅长设置）
// Update basket
current = $('#basketPopover').data('content');
newbasket = current.replace(/\d+/i,parseInt(data));
$('#basketPopover').attr('data-content',newbasket);
$('#basketPopover').setContent();
$('#basketPopover').$tip.addClass(popover.options.placement);
于 2017-09-28T09:57:16.310 回答
0
如果 jQuery > 4.1 使用
$("#popoverId").popover("dispose").popover({
title: "Your new title"
content: "Your new content"
);
于 2021-10-02T14:37:30.180 回答
0
引导程序 5.0 更新
let popoverInstance = new bootstrap.Popover($('#element'));
进而：
popoverInstance._config.content = "Hello world";
popoverInstance.setContent();
（注意：它将全局更新弹出框内容，因此如果您有多个打开的弹出框，那么它们都将更新为“Hello world”）
于 2021-10-22T17:46:57.210 回答