在 bootstrap 中动态更改 popover 的内容

Question

我正在尝试动态更改 bootstrap 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/

Answer 2

仅当您希望它是 dinamyc 时，您才可以通过 javascript 设置弹出框，您不必在 html 中定义字段。

因此删除使按钮成为 popover 的 html，并使用 javascript 创建，如下所示：

   <button class="btn btn-danger btn-xs" id="SaveChangesBtn" type="button"  ><span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span>&nbspSave Changes</button>

所以按钮没有定义工具提示，因为您将使用 javascript 创建

      $('#SaveChangesBtn').on('click', function(){

         $(this).popover({content: 'Cannot proceed with Save while Editing a row.'});

     });

Answer 3

我可以向你展示我的解决方案； 你可以分析它，看看它是否有帮助；

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

Answer 4

我一直在使用以下内容动态更改 Bootstrap 4 popovers 的内容：

$('#SaveChangesBtn').data('bs.popover').element.dataset.content = 'Cannot proceed with Save while Editing a row.';

我相信一旦您在页面上初始化 Popover，Bootstrap 就会将所有信息放入数据属性bs.popover ，Bootstrap 使用该属性来构建该bs.popover的内容。

Answer 5

将Bootstrap 4.5.2与Popper 1.11一起使用，我能够使用它；

var divElem = $('#myPopperDiv');
divElem.data('bs.popover').element.dataset.content = dynamicString;
divElem.data('bs.popover').setContent();

其中dynamicString是使用间隔每 1 秒更新一次的内容。

注意：要记住的一件事是divElem.data('bs.popover')直到用户第一次单击弹出按钮后才存在。 因为我在回调中更新它，所以我检查

if(divElem.data('bs.popover')) {
  divElem.data('bs.popover').element.dataset.content = dynamicString;
  divElem.data('bs.popover').setContent();
}

Answer 6

只需从按钮声明中删除 'data-content' 属性。