twitter-bootstrap 如何更改已显示的引导程序弹出窗口的内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18166627/
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 change content of a bootstrap popover that has already been displayed?
提问by Pr Shadoko
I have a form with a password entered twice. I check password complexity and consistency and display appropriate error messages into a popover attached to the INPUT field:
我有一个输入两次密码的表单。我检查密码的复杂性和一致性，并在附加到 INPUT 字段的弹出窗口中显示适当的错误消息：
<a href="#" id="aIdPwd2" data-toggle="manual" data-content="The password entered does not match the one previously entered" data-placement="right" href="#" rel="popover">
<input type="password" id="iIdPwd2" class="fmt1" size="60" value=""/>
</a>
With this code:
使用此代码：
$("#aIdPwd2").popover({content: msg});
You can chose dynamicaly the message that will be displayed. But once it has been displayed once, it will then always remain the same.
您可以动态选择将要显示的消息。但是一旦显示一次，它将始终保持不变。
I read many articles about this popular issue and did try many things (attach 2 different popover to the same input, change the inner html in the getElementsByClassName("popover-content"), destroy and recreate the popover, ..), but without any success so far.
我阅读了很多关于这个流行问题的文章并尝试了很多东西（将 2 个不同的弹出框附加到同一输入，更改 getElementsByClassName("popover-content") 中的内部 html，销毁并重新创建弹出框，..），但没有到目前为止任何成功。
A solution on how to change content of a bootstrap popover that has already been displayed or any kind of work-around would be highly appreciated.
关于如何更改已显示的引导程序弹出窗口的内容的解决方案或任何类型的解决方法将受到高度赞赏。
采纳答案by sUP
document.getElementsByClassName("popover-content")[0].innerHTML = 'something else';
sure that this doesn't work?
确定这不起作用？
tried it on this pageand it works as expected.
在此页面上尝试过，它按预期工作。
UPDATE:it will work only if the popover is visible because the element is recreated/destroyed every mouseover/mouseout event
更新：只有当弹出窗口可见时它才会工作，因为每个鼠标悬停/鼠标退出事件都会重新创建/销毁元素
i guess it's not the best solution, but you can do this:
我想这不是最好的解决方案，但你可以这样做：
var msg = 'ben123 is not a goddamn password!';
document.getElementById('password').addEventListener('mouseover', function() {
document.getElementsByClassName("popover-content")[0].innerHTML = msg;
});
and change msgwhen you need
并msg在需要时更改
回答by user566245
In Twitter Bootstrap 3, I just update the content and then call show. Calling of the showensure that its resized correctly and then positioned correctly.
在 Twitter Bootstrap 3 中，我只是更新内容，然后调用show. 调用show确保其正确调整大小，然后正确定位。
$(".notes").data("bs.popover").options.content="Content1";
$(".notes").popover("show");
$(".notes").data("bs.popover").options.content="Content2";
$(".notes").popover("show");
If you are using data tags to show the content then you will need to update the data tag as that takes precedence. eg.
如果您使用数据标签来显示内容，那么您将需要更新数据标签，因为它具有优先权。例如。
$(".notes").attr("data-content","Content1");
$(".notes").popover("show");
$(".notes").attr("data-content","Content2");
$(".notes").popover("show");
I like the second option better coz it doesn;t access the internals by doing data(bs.popover)butthe first options is much faster as it doesn't update the dom. So pick what floats your boat.
我更喜欢第二个选项，因为它没有；不能通过这样做来访问内部结构，data(bs.popover)但第一个选项要快得多，因为它不更新 dom。所以选择什么漂浮你的船。
回答by alexw
The problem with solutions that rely on popover('show')is that if you do this in an event handler for the showevent, you will end up with an infinite loop.
依赖解决方案的问题popover('show')在于，如果您在事件的事件处理程序中执行此操作show，您将最终陷入无限循环。
If you just want to display some content in your popover when it has already been shown, you will need to directly modify the DOM:
如果您只想在已经显示的弹出窗口中显示某些内容，则需要直接修改 DOM：
$("#aIdPwd2").next(".popover").find(".popover-content").html(msg);
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 加载一些数据并在悬停时在弹出窗口的内容中显示这些数据的弹出窗口：
DOM:
DOM：
<a href="#" id="myPopover" data-toggle="popover" data-title="Details" data-api-parameter="someValue">Hover here for details</a>
jQuery:
jQuery：
$("#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://api.example.com", {
'apiParameter': myParameter
}).done(function (data) {
var result = data['apiReturnValue'];
contentEl.html(result);
}).fail(function (data) {
result = "No info found.";
contentEl.html(result);
});
});
This, of course, assumes that you trust the data supplied by api.example.com. If not, you will probably want to escape the data returned to mitigate XSS attacks.
当然，这假设您信任 api.example.com 提供的数据。如果没有，您可能希望转义返回的数据以减轻 XSS 攻击。
回答by intotecho
To replace the contents of a popover on an element, first call destroy. Tested on Bootstrap 3.1.1
要替换元素上弹出框的内容，首先调用 destroy。在 Bootstrap 3.1.1 上测试
$("#aIdPwd2").popover('destroy').popover({content: msg});
