Bootstrap Popover内容不能动态更改

我使用如下代码：

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

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

可以正确创建弹出窗口及其内容。我想在不关闭弹出窗口的情况下将新数据加载到弹出窗口。

我尝试了以下方法：

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

调用之后，元素中的数据将更改，但显示的弹出窗口中的数据不会更改。

我应该怎么做？

最佳答案

如果您像这样抓取popover实例：

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

Then, to redraw the popover, use the .setContent() method:

popover.setContent();

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

因此，在您的示例中，请尝试：

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

更新资料

The setContent() method also removes the placement class, so you should do:

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

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