javascript - 如何更改已经显示的 Bootstrap 弹出窗口的内容？

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 个不同的弹出窗口附加到同一个输入，更改 getElementsByClassName("popover-content") 中的内部 html，销毁并重新创建弹出窗口，..) , 但到目前为止没有任何成功。

非常感谢有关如何更改已显示的 Bootstrap 弹出窗口内容的解决方案或任何类型的解决方法。

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。所以选择让你的船漂浮的东西。