Bootstrap popover内容无法动态更改

Question

我使用如下代码:

$(".reply").popover({
  content: "Loading...",
  placement: "bottom"
});

$(".reply").popover("toggle");

这正确地创建了popover及其内容.我想在不关闭弹出窗口的情况下将新数据加载到弹出框中.

我尝试过以下方法:

var thisVal = $(this);
$.ajax({
  type: "POST",
  async: false,
  url: "Getdes",
  data: { id: ID }
}).success(function(data) {
  thisVal.attr("data-content", data);
});

在此调用之后,元素中的数据将被更改,但不会显示在显示的弹出框中.

我该怎么办？

Answer 1

如果你像这样抓住popover实例:

var popover = $('.reply').data('bs.popover');

然后,要重绘popover,请使用以下.setContent()方法:

popover.setContent();

我发现浏览源代码:https://github.com/twitter/bootstrap/blob/master/js/popover.js

所以,在你的例子中,尝试:

thisVal.attr('data-content',data).data('bs.popover').setContent();

更新

该setContent()方法还会删除放置级别,因此您应该:

var popover = thisVal.attr('data-content',data).data('bs.popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);

演示:http://jsfiddle.net/44RvK

Answer 2

是的,你可以,事实上还没有提出最简单的方法.

这是我的方式 - >

    var popover = $('#example').data('bs.popover');
    popover.options.content = "YOUR NEW TEXT";

popover是一个对象,如果你想了解它的更多信息,请在定义后尝试执行console.log(popover)以查看如何在以后使用它!

编辑

从Bootstrap 4 alpha 5开始,数据结构有点不同.你需要使用popover.config.content而不是popover.options.content

感谢@kfriend的评论

Answer 3

在bootstrap 3中:

if($el.data('bs.popover')) {
    $el.data('bs.popover').options.content = "New text";
}
$el.popover('show');

Answer 4

2012年的答案不适用于Bootstrap 3 popovers.我从提取工作解决了这个问题:

$("#popover").attr('data-content','new content');

Answer 5

大多数这些解决方案对我来说实际上看起来很糟糕.Bootstrap标准文档有一个destroy可以使用的方法.因此,通过某些事件更改内容,您可以简单地销毁然后重新创建内容.

.popover('destroy')

这适当地动态加载,刷新和重新呈现弹出窗口的内容.