jQuery Bootstrap 弹出框内容不能动态更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13564782/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap popover content cannot changed dynamically
提问by Aravindhan
I use the code as follows:
我使用的代码如下：
$(".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.
它正确地创建了弹出窗口及其内容。我想在不关闭弹出窗口的情况下将新数据加载到弹出窗口中。
I've tried the following:
我尝试了以下方法：
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.
在此调用之后，元素中的数据已更改，但显示的弹出窗口中的数据未更改。
How should i do this?
我该怎么做？
回答by David Hellsing
If you grab the popover instance like this:
如果你像这样抓取 popover 实例：
var popover = $('.reply').data('bs.popover');
Then, to redraw the popover, use the .setContent()method:
然后，要重绘弹出框，请使用以下.setContent()方法：
popover.setContent();
I found out browsing the source: https://github.com/twitter/bootstrap/blob/master/js/popover.js
我发现浏览源：https: //github.com/twitter/bootstrap/blob/master/js/popover.js
So, in your example, try:
因此，在您的示例中，请尝试：
thisVal.attr('data-content',data).data('bs.popover').setContent();
Update
更新
The setContent()method also removes the placement class, so you should do:
该setContent()方法还会删除放置类，因此您应该执行以下操作：
var popover = thisVal.attr('data-content',data).data('bs.popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);
回答by Yann Chabot
Yes you can, in fact the easiest way haven't been suggested yet.
是的，您可以，实际上尚未建议最简单的方法。
Here's my way ->
这是我的方式->
var popover = $('#example').data('bs.popover');
popover.options.content = "YOUR NEW TEXT";
popover is an object if you want to know more about it, try to do console.log(popover) after you define it to see how you can use it after !
popover 是一个对象，如果您想了解更多信息，请尝试在定义它后执行 console.log(popover) 以查看之后如何使用它！
EDIT
编辑
As of Bootstrap 4 alpha 5, the data structure is a bit different. You'll need to use popover.config.contentinstead of popover.options.content
从 Bootstrap 4 alpha 5 开始，数据结构有点不同。你需要使用popover.config.content而不是popover.options.content
Thanks to @kfriend for the comment
感谢@kfriend 的评论
回答by neiker
In bootstrap 3:
在引导程序 3 中：
if($el.data('bs.popover')) {
$el.data('bs.popover').options.content = "New text";
}
$el.popover('show');
回答by Mark L
This answer from 2012 does not work with Bootstrap 3 popovers. I extracted a working solution from this question:
2012 年的这个答案不适用于 Bootstrap 3 弹出窗口。我从这个问题中提取了一个有效的解决方案：
$("#popover").attr('data-content', 'new content');
$("#popover").attr('data-content', 'new content');
回答by bjm88
Most of these solutions actually seem hacky to me. Bootstrap standard docs have a method destroythat can be used. So, on change of content via some event you can simply destroy and then recreate content.
这些解决方案中的大多数对我来说实际上看起来很笨拙。Bootstrap 标准文档有一个destroy可以使用的方法。因此，在通过某些事件更改内容时，您可以简单地销毁然后重新创建内容。
.popover('destroy')
This properly dynamically loads, refreshes and re-renders the content of the popover.
这会正确地动态加载、刷新和重新呈现弹出窗口的内容。
回答by wilfredonoyola
SIMPLE SOLUTION
简单的解决方案
You can try with this :
你可以试试这个：
//Bootstrap v3.3.7
var popoverEl = $("#popover");
popoverEl.attr("data-content", "NEW CONTENT");
popoverEl.popover("show");
//Bootstrap v3.3.7
var popoverEl = $("#popover");
popoverEl.attr("data-content", "NEW CONTENT");
popoverEl.popover("show");
Thanks.
谢谢。
回答by mlunoe
I solved the problem using @Davidand @Sujay sreedhar's answer, but if the popover is visible during the new content is loaded, the popover needs to be repositioned:
我使用@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();
}
If it is not repositioned and the new content has e.g. a different height, the popover will expand downwards and the arrow will be off target!
如果没有重新定位并且新内容具有不同的高度，则弹出窗口将向下扩展并且箭头将偏离目标！
Also, when the button is clicked afterwards it will re-open the popover instead of closing it. The above code solves, that problem too.
此外，当之后单击按钮时，它将重新打开弹出窗口而不是关闭它。上面的代码也解决了这个问题。
Demo http://jsfiddle.net/whFv6/
(My edit was rejected, so I thought I'd post it here..)
（我的编辑被拒绝了，所以我想我会把它贴在这里..）
回答by Lionel
After the popover has been correctly initialized, you can directly use jquery to replace the class="popover-content"element:
正确初始化popover后，可以直接使用jquery替换class="popover-content"元素：
$(".popover-content").html('a nice new content')
回答by itay oded
you can just pass the title as function
您可以将标题作为函数传递
var content = 'Loading...'
function dynamicContent(){
return content
}
$(".reply").popover({
content: dynamicContent,
placement: "bottom"
});
$(".reply").popover("toggle");
and then change the variable content dynamically.
然后动态更改变量内容。
回答by Ares
<button data-toggle="popover" data-html="true" data-content='<div id="myPopover">content</div>'>click</button>
$('#myPopover').html('newContent')
This is a very clean way.
这是一种非常干净的方式。
