Javascript 在 bootstrap 中动态更改 popover 的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30810113/
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
Dynamically change content of popover in bootstrap
提问by Vimalan Jaya Ganesh
I am trying to change the content of bootstrap popover dynamically but it is not working. Fiddler: https://jsfiddle.net/99x50s2s/62/
我正在尝试动态更改 bootstrap popover 的内容，但它不起作用。提琴手：https: //jsfiddle.net/99x50s2s/62/
HTML:
HTML：
<button class="btn btn-danger btn-xs" id="SaveChangesBtn" type="button" data-toggle="popover" data-trigger="manual" data-content="There are no changes to save."><span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span> Save Changes</button>
JS:
JS：
$('#SaveChangesBtn').on('click', function(){
$(this).popover('hide');
$(this).popover({content: 'Cannot proceed with Save while Editing a row.'}).popover('show');
});
Current Result:
当前结果：
When Save changes button is clicked, the content 'There are no changes to save' is displayed.
单击“保存更改”按钮时，将显示“没有要保存的更改”内容。
Expectation:
期待：
The dynamic content "Cannot proceed with Save while Editing a row." should be displayed.
动态内容“编辑行时无法继续保存”。应该显示。
Any help is appreciated.
任何帮助表示赞赏。
回答by Hackerman
You can try something like this:
你可以尝试这样的事情：
$('#SaveChangesBtn').on('click', function(){
if($('.popover').hasClass('in')){
$(this).popover('hide');
}
else
{
$(this).attr('data-content','Cannot proceed with Save while Editing a row.');
$(this).popover('show');
}
});
This way you fix the way you are showing and hiding your popover.
通过这种方式，您可以修复显示和隐藏弹出框的方式。
Working fiddle: https://jsfiddle.net/99x50s2s/65/
工作小提琴：https: //jsfiddle.net/99x50s2s/65/
回答by Thanatos11th
I can show you my solution; You may analize it, see if it helps;
我可以向你展示我的解决方案；你可以分析它，看看它是否有帮助；
$('#popover').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
// get the content based on the basis case;
if (document.getElementById('checkbox_approval').checked == true) {
// for the case where it is already checked
var title = 'De-Activate Feature?';
var content = 'some other text here. <br><br> ' +
'<button type="button" onclick="document.getElementById(\'checkbox_approval\').checked=false;' +
'$(\'#popover\').popover(\'destroy\')">' +
'De-Activate' +
'</button>' +
'<button type="button" onclick="$(\'#popover\').popover(\'hide\')">' +
'Cancel' +
'</button>';
} else {
var title = 'Activate Feature?';
var content = 'some text here. <br><br> ' +
'<button type="button" onclick="document.getElementById(\'checkbox_approval\').checked=true;' +
'$(\'#popover\').popover(\'destroy\')">' +
'Activate' +
'</button>' +
'<button type="button" onclick="$(\'#popover\').popover(\'hide\')">' +
'Cancel' +
'</button>';
}
// popover controller
$(this).popover({
html: true,
title: title,
content: content,
placement: 'bottom',
template: '<div class="popover" role="tooltip" style="width:320px;">' +
'<div class="arrow"></div>' +
'<h3 class="popover-title"></h3>' +
'<div class="popover-content"></div>' +
'</div>'
}).popover('show');
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-lg-12 col-md-12">
<a id="popover" class="btn btn-danger">Click to toggle popover</a>
</div>
<div class="col-lg-12 col-md-12">
<label>Hidden/vissible chcker for dynamic controll
<input type="checkbox" disabled="disabled" id="checkbox_approval" name="checkbox_approval">
</label>
</div>
</div>回答by AmigaAbatttheitroad
I have been dynamically changing content of Bootstrap 4 popovers using something like this:
我一直在使用以下内容动态更改 Bootstrap 4 popovers 的内容：
$('#SaveChangesBtn').data('bs.popover').element.dataset.content = 'Cannot proceed with Save while Editing a row.';
I believe once you initialize the Popovers on your page, Bootstrap then puts all the information into the data attribute bs.popoverwhich Bootstrap uses to build the content of that popover.
我相信一旦您在页面上初始化 Popover，Bootstrap 就会将所有信息放入bs.popoverBootstrap 用来构建该弹出窗口内容的数据属性中。
回答by Luis Cardenas
you can set a popover by javascript only if you want it to be dinamyc , you dont have to define the fields in the html.
仅当您希望它是 dinamyc 时，您才可以通过 javascript 设置弹出框，您不必在 html 中定义字段。
so delete the html that make the button a popover , and create with javascript, like this:
因此删除使按钮成为 popover 的 html，并使用 javascript 创建，如下所示：
<button class="btn btn-danger btn-xs" id="SaveChangesBtn" type="button" ><span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span> Save Changes</button>
so the button is not defining the tooltip, because you are going to create with javascript
所以按钮没有定义工具提示，因为您将使用 javascript 创建
$('#SaveChangesBtn').on('click', function(){
$(this).popover({content: 'Cannot proceed with Save while Editing a row.'});
});
