动态更改bootstrap中popover的内容

Question

我试图动态更改引导程序popover的内容,但它无法正常工作.提琴手:https://jsfiddle.net/99x50s2s/62/

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>&nbspSave Changes</button>

JS:

$('#SaveChangesBtn').on('click', function(){
    $(this).popover('hide');
    $(this).popover({content: 'Cannot proceed with Save while Editing a row.'}).popover('show');        
});

目前的结果:

单击"保存更改"按钮时,将显示"无保存更改"内容.

期望:

动态内容"编辑行时无法继续保存".应该显示.

任何帮助表示赞赏.

Answer 1

你可以尝试这样的事情:

$('#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');
}
});

这样您就可以修复显示和隐藏弹出窗口的方式.

工作小提琴:https://jsfiddle.net/99x50s2s/65/