Bootstrap Popover内容不能动态更改 [英] Bootstrap popover content cannot changed dynamically

问题描述

我使用以下代码:

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

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

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

which creates the popover and its content correctly. I want to load a new data into the popover without closing the popover.

我尝试了以下操作:

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

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

After this call the data in the element is changed but not in the popover which is shown.

我应该怎么做?

推荐答案

如果您像这样抓住弹出窗口实例:

If you grab the popover instance like this:

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

然后，要重绘弹出窗口，请使用.setContent()方法:

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

popover.setContent();

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

因此，在您的示例中，尝试:

So, in your example, try:

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

更新

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

这篇关于Bootstrap Popover内容不能动态更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！