Question

我使用如下代码：

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

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

正确创建popover及其内容。我想在不关闭popover的情况下将新数据加载到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

是的，你可以，实际上还没有提出最简单的方法。

这是我的方式 - ＆gt;

    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。我从this question中提取了一个有效的解决方案：

$（＆＃34; #popover＆＃34;）。attr（＆＃39;数据内容＆＃39;，＆＃39;新内容＆＃39;）;

Answer 5

这些解决方案中的大多数实际上对我来说都很苛刻。 Bootstrap标准文档有一个可以使用的方法destroy。因此，在通过某些事件更改内容时，您可以简单地销毁然后重新创建内容。

.popover('destroy')

这可以正确地动态加载，刷新和重新呈现弹出窗口的内容。

Answer 6

简单解决方案

你可以试试这个：

//Bootstrap v3.3.7 var popoverEl = $("#popover"); popoverEl.attr("data-content", "NEW CONTENT"); popoverEl.popover("show");

感谢。

Answer 7

我使用@David和@Sujay sreedhar的答案解决了问题，但是如果在加载新内容期间弹出窗口是可见的，则需要重新定位弹出窗口：

var popover = thisVal.attr('data-content',data).data('popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);
// if popover is visible before content has loaded
if ($(".reply").next('div.popover:visible').length){
    // reposition
    popover.show();
}

如果没有重新定位，新内容有例如不同的高度，弹出将向下扩展，箭头将脱离目标！

此外，当按下按钮后，它将重新打开弹出框而不是关闭它。上面的代码也解决了这个问题。

演示http://jsfiddle.net/whFv6/

（我的编辑被拒绝，所以我想我会在这里发布..）

Answer 8

正确初始化popover后，您可以直接使用jquery替换class="popover-content"元素：

$(".popover-content").html('a nice new content')

Answer 9

你可以将标题作为函数传递

var content = 'Loading...'

function dynamicContent(){
  return content
}
$(".reply").popover({
  content: dynamicContent,
  placement: "bottom"
});

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

然后动态更改变量内容。

Answer 10

<button data-toggle="popover" data-html="true" data-content='<div id="myPopover">content</div>'>click</button>
$('#myPopover').html('newContent')

这是一种非常干净的方式。

Answer 11

我为bootstrap 3.1.1编写了一个异步弹出窗口。我刚才叫它popoverasync。这是一个演示：

async popover demo

您可以在此处下载演示源：

demo source

对我来说，技巧是编写此异步弹出框的getContent方法，以便调用用户的javascript函数来检索内容，但getContent将同步返回等待动画，回到getContent的来电者。这样，popover就有内容。首先，在用户等待时，最后在内容到达时。我所指的内容可以在演示源extensions.js中找到：

希望这能帮到你！

丹

Answer 12

HTML

<a data-toggle="popover" popover-trigger="outsideClick" title="Indicadores" data-content="" data-html="true" class="Evaluar" id="alun codigo"><span><i class="fa fa-check"></i>algun nombre</span></a>

JQUERY

$('a.Evaluar').on('click', function () {
    var a=$(this);//.attr('data-content', "mañana");
    $.ajax({
        url: "../IndicadorControlador?accion=BuscarPorProceso&cP=24",
        type: 'POST',
        dataType: 'json'
    })
            .done(function (response) {
                //alert("done. ");
                var ind = "";
                $(response).each(function (indice, elemento) {
                    //alert(elemento.strIdentificador);
                    //console.log('El elemento con el índice ' + indice + ' contiene ' + elemento.strIdentificador.toString());
                    ind += '<a href=#>'+elemento.strIdentificador.toString()+'</a>';
                });
              $(a).attr('data-content', ind);
            })
            .fail(function () {
                sweetAlert("ERROR!", " Algo salió mal en el controlador!", "error");
            })
            .complete(function () {
            });

    $('[data-toggle="popover"]').popover();
});

Answer 13

启用弹出窗口后，即使数据已更改，它也会保留其先前版本（如果已创建）。您需要销毁先前的版本，以允许再次创建新的弹出框。在Bootstrap 4.x中，通过

.popover('dispose')

只要通过ajax调用发生数据更改，就执行此操作。

Answer 14

对于Boostrap v4.3

以下代码在弹出窗口内容显示之前对其进行更新：

// When the popover is show
$('.my-popover').on('show.bs.popover', function () {
  // Update popover content
  $(this).attr('data-content', 'New content');
})

对此JSFiddle进行在线测试。

Answer 15

使用 bootstrap 4.6 我正在使用此代码来更新它：

$("#disk-usage-details").attr("data-content", "your new content to here");

其他人都不适合我。

Bootstrap popover内容无法动态更改

15 个答案:

HTML

JQUERY