在 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' 屬性。