如何更改已显示的引导程序弹出窗口的内容？

Question

我有一个输入密码两次的表格.我检查密码复杂性和一致性,并在附加到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>

使用此代码:

$("#aIdPwd2").popover({content: msg});

您可以选择动态显示将要显示的消息.但是一旦它显示一次,它将始终保持不变.

我阅读了很多关于这个流行问题的文章并尝试了很多东西(将2个不同的popover附加到相同的输入,更改getElementsByClassName中的内部html("popover-content"),销毁并重新创建popover,..),但没有迄今取得的任何成功.

关于如何更改已经显示的引导程序弹出窗口内容或任何类型的解决方案的解决方案将受到高度赞赏.

Answer 1

在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");

如果您使用数据标签显示内容,则需要更新数据标记,因为它优先.例如.

$(".notes").attr("data-content","Content1");
$(".notes").popover("show");
$(".notes").attr("data-content","Content2");
$(".notes").popover("show");

我喜欢第二个选项更好,因为它没有;通过做访问内部,data(bs.popover) 但第一个选项更快,因为它不更新dom.所以选择浮在你船上的东西.

Answer 2

document.getElementsByClassName("popover-content")[0].innerHTML = 'something else';

确定这行不通？

在此页面上尝试过，它按预期工作。

更新：仅当弹出窗口可见时它才起作用，因为每个鼠标悬停/鼠标移出事件都会重新创建/销毁该元素

我想这不是最好的解决方案，但你可以这样做：

var msg = 'ben123 is not a goddamn password!';

document.getElementById('password').addEventListener('mouseover', function() {  
    document.getElementsByClassName("popover-content")[0].innerHTML = msg; 
});

并msg在需要时进行更改