4

我有一个输入了两次密码的表格。我检查密码的复杂性和一致性，并在附加到 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，销毁并重新创建弹出框，..），但没有到目前为止的任何成功。

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

4

4 回答 4

14

在 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。所以选择什么漂浮你的船。

于 2014-02-09T06:33:18.003 回答
4 
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在需要时进行更改

于 2013-08-11T22:31:52.417 回答
4

依赖的解决方案的问题popover('show')是，如果您在事件的事件处理程序中执行此操作show，您将最终陷入无限循环。

如果你只是想在你的 popover 中显示一些已经显示的内容，你需要直接修改 DOM：

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

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

DOM：

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

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

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

于 2016-08-18T22:58:10.937 回答
3

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

$("#aIdPwd2").popover('destroy').popover({content: msg});
于 2015-05-06T12:40:46.270 回答