Bootstrappopup窗口内容不能dynamic改变
我使用的代码如下：
$(".reply").popover({ content: "Loading...", placement: "bottom" }); $(".reply").popover("toggle"); 从而正确地创buildpopover和其内容。 我想在popover中加载一个新的数据而不closurespopover。
我已经尝试了以下内容：
var thisVal = $(this); $.ajax({ type: "POST", async: false, url: "Getdes", data: { id: ID } }).success(function(data) { thisVal.attr("data-content", data); });
在这个调用之后，元素中的数据会被更改，但不会显示在popup窗口中。
我应该怎么做？
如果你像这样抓取popover实例：
var popover = $('.reply').data('bs.popover');
然后，使用.setContent()方法来重新绘制popup窗口：
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
是的，你可以，实际上最简单的方法还没有被build议。
这是我的方式 – >
var popover = $('#example').data('bs.popover'); popover.options.content = "YOUR NEW TEXT";
popup窗口是一个对象，如果你想知道更多关于它，尝试做console.log（popover）后，你定义它，看看你可以使用它后！
编辑
至于Bootstrap 4 alpha 5，数据结构有些不同。 你将需要使用popover.config.content而不是popover.options.content
感谢@kfriend的评论
在bootstrap 3中：
if($el.data('bs.popover')) { $el.data('bs.popover').options.content = "New text"; } $el.popover('show');
这些解决scheme中的大部分对我来说实际上似乎很难受。 Bootstrap标准文档有一个可以使用的方法destroy 。 所以，通过某些事件改变内容，你可以简单地销毁，然后重新创build内容。
.popover('destroy')
这适当地dynamic加载，刷新和重新渲染popover的内容。
从2012年的这个答案不适用于Bootstrap 3 popovers。 我从这个问题提取了一个工作解决scheme：
$（“＃popover”）。attr（'data-content'，'new content'）;
我使用@David和@Sujay sreedhar的答案解决了这个问题，但是如果在加载新内容期间popup窗口是可见的，则需要重新定位popup窗口：
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(); }
如果没有重新定位并且新的内容具有不同的高度，则popup窗口将向下扩展，并且箭头将脱离目标！
另外，当button被点击后，它将重新打开popover而不是closures它。 上面的代码解决了这个问题。
（我的编辑被拒绝了，所以我想我会在这里张贴..）
简单的解决scheme
你可以试试这个：
//Bootstrap v3.3.7 var popoverEl = $("#popover"); popoverEl.attr("data-content", "NEW CONTENT"); popoverEl.popover("show");
谢谢。
popover被正确的初始化之后，你可以直接使用jquery来replaceclass="popover-content"元素：
$(".popover-content").html('a nice new content')
你可以传递标题的function
var content = 'Loading...' function dynamicContent(){ return content } $(".reply").popover({ content: dynamicContent, placement: "bottom" }); $(".reply").popover("toggle");
然后dynamic更改variables内容。
我为bootstrap 3.1.1写了一个asynchronouspopover。 我只是把它叫做popoverasync 。 这是一个示范：
asynchronouspopover演示
你可以在这里下载演示的源代码：
演示源
对我来说，诀窍是编写这个asynchronouspopover的getContent方法，以便调用用户的javascript函数来检索内容，但getContent将同步返回一个等待animation，返回给getContent的调用者。 这样，popover有内容的方式。 首先，用户等待，最后到达内容。 我所指的可以在extensions.js中的演示源中find：
希望这可以帮助你！
担
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(); });
