Javascript 如何更改已显示的引导弹出框的内容？

我有一个表单，密码输入了两次。我检查密码的复杂性和一致性，并将适当的错误消息显示在连接到输入字段的popover中：

<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>

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

我读了很多关于这个流行问题的文章，并尝试了很多方法（将两个不同的popover附加到同一个输入中，更改getElementsByClassName（“popover内容”）中的内部html，销毁并重新创建popover，…），但到目前为止没有成功

对于如何更改已显示的引导popover内容或任何类型的解决方案，我们将不胜感激

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

真的这样不行吗

试穿后，效果如预期

更新：只有当popover可见时，它才会工作，因为元素在每次mouseover/mouseout事件中都会被重新创建/销毁

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

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

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

---

在Twitter Bootstrap 3中，当您需要更改

msg

时，我只需更新内容，然后调用

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

---

我更喜欢第二种选择，因为它不会；不要通过执行

数据（bs.popover）

来访问内部构件，但是第一个选项的速度要快得多，因为它不会更新dom。所以，选择什么可以让你的船漂浮。

要替换元素上的popover内容，首先调用destroy。 在Bootstrap 3.1.1上测试

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

---

依赖于

popover（'show'）

的解决方案的问题在于，如果您在

show

事件的事件处理程序中执行此操作，那么最终将得到一个无限循环

如果只想在已显示的popover中显示某些内容，则需要直接修改DOM：

$("#aIdPwd2").next(".popover").find(".popover-content").html(msg);

例如，如果您想要一个将从API加载一些数据并在悬停时显示在popover内容中的popover：

DOM:

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);
    });
});

$（“#myPopover”）.popover({
触发器：“悬停”
}).on（'show.bs.popover'，函数（）{
var popover=$（此）；
var contentEl=popover.next（.popover”）.find（.popover内容）；
//等待提取数据时显示微调器
html（“”）；
var myParameter=popover.data（'api-parameter'）；
$.getJSON（“http://api.example.com", {
“APIPParameter”：myParameter
}).完成（功能（数据）{
var结果=数据['APIRTURNVALUE']；
html（结果）；
}).失败（功能（数据）{
结果=“未找到任何信息。”；
html（结果）；
});
});

---

当然，这假设您信任api.example.com提供的数据。如果没有，您可能会希望逃避返回的数据以减轻XSS攻击。

我已经用此解决方案进行了一些测试，并发现了一些相互关联的问题：1）您需要制作$（“#示例”）.popover（'show'）；在将任何内容设置到文档中之前。GetElementsByCassName（“popover内容”）[0]。innerHTML或该元素将不存在，这将导致错误。2） 如果您通过按钮触发显示/设置的javascript，那么您会遇到一些棘手的副作用，尽管data toggle=“manual”，但popver会自动隐藏，从而导致错误并扰乱整个事件链。如果你能处理这两个限制，那么它就可以工作了。你能分享你的测试代码吗，这样我就可以检查我是否遗漏了什么？当你在引导中关闭一个模式时，它的所有html都将被删除，这样你就无法通过getElementsByClassName（“popover内容”）找到该模式的任何内容

<a href="#" id="myPopover" data-toggle="popover" data-title="Details" data-api-parameter="someValue">Hover here for details</a>

$("#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);
    });
});