Javascript 如何更新引导程序弹出文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10226851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to update bootstrap popover text?
提问by Chris
I am using bootstrap-popover to show a message beside an element.
我正在使用 bootstrap-popover 在元素旁边显示一条消息。
If I want to show different text in the popover after the first time, the text does not change. Re instantiating the popover with new text does not overwrite.
如果我想在第一次后在弹出窗口中显示不同的文本，文本不会改变。使用新文本重新实例化弹出窗口不会覆盖。
See this js fiddle for a live example:
请参阅此 js fiddle 以获取实时示例：
(The message in the alert and the message in the dom is inconsistent after the first click) The documentation is a bit light on how to unbind: http://twitter.github.com/bootstrap/javascript.html#popovers
（第一次点击后，alert中的消息和dom中的消息不一致）文档对如何解绑有点轻描淡写：http: //twitter.github.com/bootstrap/javascript.html#popovers
Am I using this wrong? The Any suggestions on how to work around?
我使用这个错误吗？关于如何解决的任何建议？
Thanks
谢谢
采纳答案by Tats_innit
Hiya please see working demohere: http://jsfiddle.net/4g3Py/1/
你好，请在这里查看工作演示：http: //jsfiddle.net/4g3Py/1/
I have made the changes to get your desired outcome. :)
我已经进行了更改以获得您想要的结果。:)
I reckon you already know what you are doing but some example recommendations from my end as follows for sample: http://dl.dropbox.com/u/74874/test_scripts/popover/index.html#- sharing this link to give you idea for different link with different pop-over if you will see the source notice attribute data-contentbut what you wanted is working by the following changes.
我想你已经知道你在做什么，但我最后的一些示例建议如下：http: //dl.dropbox.com/u/74874/test_scripts/popover/index.html#- 分享这个链接给你如果您将看到源通知属性，data-content但您想要的是通过以下更改工作的具有不同弹出窗口的不同链接的想法。
Have a nice one and hope this helps. D'uh don't forget to up vote and accept the answer :)
祝你好运，希望这会有所帮助。D'uh 不要忘记投票并接受答案:)
Jquery Code
查询代码
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
HTML
<a id="test">Click me</a>
?
回答by Rabih Kodeih
You can access the options directly using the jquery data closure dictionary like this:
您可以使用 jquery 数据闭包字典直接访问这些选项，如下所示：
$('a#test').data('bs.popover').options.content = 'new content';
This code should work fine even after first initializing the popover.
即使在首次初始化弹出窗口之后，此代码也应该可以正常工作。
回答by Codefendant
just in-case anyone's looking for a solution that doesn't involve re-instantiating the popoverand just want to change the content html, have a look at this:
以防万一有人正在寻找不涉及重新实例化popover并且只想更改内容 html的解决方案，请查看以下内容：
$('a#test').data('popover').$tip.find(".popover-content").html("<div>some new content yo</div>")
Update:At some point between this answer being written and Bootstrap 3.2.0 (I suspect at 3.0?) this changed a little, to:
更新：在编写此答案和 Bootstrap 3.2.0（我怀疑是 3.0？）之间的某个时间点，这发生了一些变化，变为：
$('a#test').data('bs.popover').tip().find ............
回答by Helge Talvik S?derstr?m
Old question, but since I notice that the no answer provides the correct way and this is a common question, I'd like to update it.
老问题，但由于我注意到 no answer 提供了正确的方法，这是一个常见问题，我想更新它。
Use the $("a#test").popover("destroy");-method. Fiddle here.
使用$("a#test").popover("destroy");- 方法。在这里摆弄。
This will destroy the old popover and enable you to connect a new one again the regular way.
这将破坏旧的弹出窗口，并使您能够以常规方式再次连接新的弹出窗口。
Here's an example where you can click a button to set a new popover on an object that already has a popover attached. See fiddle for more detail.
这是一个示例，您可以单击按钮在已附加弹出框的对象上设置新弹出框。有关更多详细信息，请参阅小提琴。
$("button.setNewPopoverContent").on("click", function(e) {
e.preventDefault();
$(".popoverObject").popover("destroy").popover({
title: "New title"
content: "New content"
);
});
回答by Googol
The question is more than one year old, but maybe this would be usefull for others.
这个问题已经超过一年了，但也许这对其他人有用。
If the content is only changed while the popover is hidden, the easiest way I've found is using a function and a bit of JS code.
如果仅在隐藏弹出窗口时更改内容，我发现最简单的方法是使用函数和一些 JS 代码。
Specifically, my HTML looks like:
具体来说，我的 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>
Please note no data-content is specified. In JS, when the popover is created, a function is used for the content:
请注意没有指定数据内容。在 JS 中，当创建 popover 时，对内容使用一个函数：
$('test').popover({
html: true,
content: function() { return $('#popover-content').html(); }
});
And now you can change anywhere the popover-content div and the popover will be updated the next time is shown:
现在您可以更改 popover-content div 的任何位置，并且下次显示时将更新 popover：
$('#popover-content').html("<p>New content</p>");
I guess this idea will also work using plain text instead of HTML.
我想这个想法也适用于纯文本而不是 HTML。
回答by alexw
You can always directly modify the DOM:
您始终可以直接修改 DOM：
$('a#test').next(".popover").find(".popover-content").html("Content");
For example, if you want a popover that will load some data from an API and display that in the popover's content on hover:
例如，如果您想要一个从 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>This assumes that you trust the data supplied by the API. If not, you will need to escape the data returned to mitigate XSS attacks.
这假设您信任 API 提供的数据。如果没有，您将需要转义返回的数据以减轻 XSS 攻击。
回答by Markus Andreas
On Boostrap 4 it is just one line:
在 Boostrap 4 上，它只有一行：
$("#your-element").attr("data-content", "your new popover content")
回答by Antony
I found Bootstrap popover content cannot changed dynamicallywhich introduces the setContentfunction. My code (hopefully helpful to someone) is therefore:
我发现Bootstrap popover 内容不能动态更改，这引入了该setContent功能。因此，我的代码（希望对某人有帮助）是：
(Noting that jquery data() isn't so good at setting as it is getting)
（注意 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);
