如何更新bootstrap popover文本？

Question

我正在使用bootstrap-popover在元素旁边显示一条消息.

如果我想在第一次之后在弹出窗口中显示不同的文本,则文本不会更改.使用新文本重新实例化弹出窗口不会覆盖.

有关实例,请参阅此js小提琴:

http://jsfiddle.net/RFzvp/1/

(第一次单击后,警报中的消息和dom中的消息不一致)文档对如何解除绑定有点说明:http://twitter.github.com/bootstrap/javascript.html#popovers

我用错了吗？关于如何解决的任何建议？

谢谢

Answer 1

您可以使用jquery数据闭包字典直接访问选项,如下所示:

$('a#test').data('bs.popover').options.content = 'new content';

即使在首次初始化弹出框后,此代码也可以正常工作.

Answer 2

Hiya请在这里看到工作演示:http://jsfiddle.net/4g3Py/1/

我已做出改变以获得您期望的结果.:)

我估计你已经知道你在做什么了,但是我的结尾的一些示例建议如下:http://dl.dropbox.com/u/74874/test_scripts/popover/index.html# - 分享这个链接给你如果您将看到源通知属性,data-content但您想要的是通过以下更改工作,可以使用不同的弹出式链接.

有一个好的,希望这有帮助.呃,别忘了投票,接受答案:)

Jquery代码

var i = 0;
$('a#test').click(function() {
    i += 1;

    $('a#test').popover({
        trigger: 'manual',
        placement: 'right',
        content: function() {
           var message = "Count is" + i;
             return message;
        }
    });
    $('a#test').popover("show");

});?

HTML

<a id="test">Click me</a>
?

Answer 3

只是在任何人都在寻找一个不涉及重新实例化的解决方案popover而只是想改变内容的HTML,看看这个:

$('a#test').data('popover').$tip.find(".popover-content").html("<div>some new content yo</div>")

更新:在写这个答案和Bootstrap 3.2.0(我怀疑是3.0？)之间的某个时刻,这个改变了一点,到:

$('a#test').data('bs.popover').tip().find ............

Answer 4

老问题,但是因为我注意到没有答案提供了正确的方法,这是一个常见的问题,我想更新它.

使用$("a#test").popover("destroy");-method.小提琴这里.

这将破坏旧的弹出窗口并使您能够以常规方式再次连接新的弹出窗口.

这是一个示例,您可以单击按钮在已附加弹出窗口的对象上设置新的弹出窗口.请参阅小提琴了解更多详情.

$("button.setNewPopoverContent").on("click", function(e) {
    e.preventDefault();

    $(".popoverObject").popover("destroy").popover({
        title: "New title"
        content: "New content"
    );
});

Answer 5

问题是一年多了,但也许这对其他人有用.

如果仅在隐藏弹出窗口时更改内容,我发现的最简单方法是使用函数和一些JS代码.

具体来说,我的HTML看起来像:

<input id="test" data-toggle="popover"
       data-placement="bottom" data-trigger="focus" />
<div id="popover-content" style="display: none">
  <!-- Hidden div with the popover content -->
  <p>This is the popover content</p>
</div>

请注意,未指定数据内容.在JS中,当创建弹出窗口时,会对内容使用一个函数:

$('test').popover({
    html: true,
    content: function() { return $('#popover-content').html(); }
});

现在,您可以更改popover-content div的任何位置,并在下次显示时更新popover:

$('#popover-content').html("<p>New content</p>");

我想这个想法也可以使用纯文本而不是HTML.

Answer 6

在 Boostrap 4 上只有一行：

$("#your-element").attr("data-content", "your new popover content")