如何更新引導彈出文本？

Question

我正在使用bootstrap-popover在元素旁邊顯示消息。

如果我想在第一次彈出後顯示不同的文字，文字不會改變。用新文本實例化彈出窗口不會被覆蓋。

見這個js搗鼓一個活生生的例子：

http://jsfiddle.net/RFzvp/1/

（在警報和DOM中的消息。該消息是第一次點擊後不一致） 文檔是如何略顯清淡解除綁定：http://twitter.github.com/bootstrap/javascript.html#popovers

我使用這個錯誤嗎？有關如何解決的任何建議？

感謝

Answer 1

你好，請參見工作演示這裏：http://jsfiddle.net/4g3Py/1/

我所做的更改，以得到您想要的結果。 :)

我想你已經知道你在做什麼，但是從我結束了一些建議，例如作爲樣本如下：http://dl.dropbox.com/u/74874/test_scripts/popover/index.html# - 共享此鏈接給你的想法與各種彈出了，如果你會看到不同的源鏈接通知屬性data-content但您想要的是通過以下更改。

有一個不錯的，希望這可以幫助。 D'呃不要忘記了投票，並接受了答案:)

jQuery代碼

var i = 0; 
$('a#test').click(function() { 
    i += 1; 

    $('a#test').popover({ 
     trigger: 'manual', 
     placement: 'right', 
     content: function() { 
      var message = "Count is" + i; 
      return message; 
     } 
    }); 
    $('a#test').popover("show"); 

});​ 

HTML

<a id="test">Click me</a> 
​ 

Answer 2

您可以直接使用jQuery訪問選項數據關閉字典是這樣的：

$('a#test').data('bs.popover').options.content = 'new content'; 

即使首次初始化彈出窗口，此代碼也應該正常工作。

Answer 3

只是在情況下任何人都在尋找不涉及重新實例化popover，只是想改變內容的HTML的解決方案，看看這個：

$('a#test').data('popover').$tip.find(".popover-content").html("<div>some new content yo</div>") 

更新：在被寫入這個答案之間的某一點和Bootstrap 3.2.0（我在3.0懷疑？）這個變化不大，到：

$('a#test').data('bs.popover').tip().find ............ 

Answer 4

的問題是多一歲，但也許這將是有用的人。

如果內容僅在彈出窗口被隱藏時發生改變，我發現的最簡單的方法是使用一個函數和一些JS代碼。

具體來說，我的HTML看起來像：

<input id="test" data-toggle="popover" 
     data-placement="bottom" data-trigger="focus" /> 
<div id="popover-content" style="display: none"> 
    <!-- Hidden div with the popover content --> 
    <p>This is the popover content</p> 
</div> 

請注意，沒有指定數據內容。在JS，創建酥料餅的時候，一個功能用於內容：

$('test').popover({ 
    html: true, 
    content: function() { return $('#popover-content').html(); } 
}); 

現在你可以在任何地方改變酥料餅的內容DIV和酥料餅將被更新下一次顯示：

$('#popover-content').html("<p>New content</p>"); 

我想這個想法也可以使用純文本而不是HTML。

Answer 5

老問題，但因爲我注意到沒有答案提供了正確的方法，這是一個常見的問題，我想更新它。使用$("a#test").popover("destroy");-方法。 Fiddle here。

這將破壞舊的彈出窗口並使您能夠以常規方式再次連接新彈窗。

下面是一個例子，您可以單擊一個按鈕，在已連接彈出窗口的對象上設置新的彈出窗口。請參閱小提琴瞭解更多細節。

$("button.setNewPopoverContent").on("click", function(e) { 
    e.preventDefault(); 

    $(".popoverObject").popover("destroy").popover({ 
     title: "New title" 
     content: "New content" 
    ); 
}); 

Answer 6

你總是可以直接修改DOM：

$('a#test').next(".popover").find(".popover-content").html("Content"); 

例如，如果你想有一個酥料餅將從一個API加載一些數據並顯示，在酥料餅的懸停內容：

$("#myPopover").popover({ 
 
     trigger: 'hover' 
 
    }).on('shown.bs.popover', function() { 
 
     var popover = $(this); 
 
     var contentEl = popover.next(".popover").find(".popover-content"); 
 
     // Show spinner while waiting for data to be fetched 
 
     contentEl.html("<i class='fa fa-spinner fa-pulse fa-2x fa-fw'></i>"); 
 

 
     var myParameter = popover.data('api-parameter'); 
 
     $.getJSON("http://ipinfo.io/" + myParameter) 
 
     .done(function (data) { 
 
      var result = ''; 
 
      if (data.org) { 
 
      result += data.org + '<br>'; 
 
      } 
 
      if (data.city) { 
 
      result += data.city + ', '; 
 
      } 
 

 
      if (data.region) { 
 
      result += data.region + ' '; 
 
      } 
 
      if (data.country) { 
 
      result += data.country; 
 
      } 
 
      if (result == '') { 
 
      result = "No info found."; 
 
      } 
 
      contentEl.html(result); 
 
     }).fail(function (data) { 
 
      result = "No info found."; 
 
      contentEl.html(result); 
 
     }); 
 
    });

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<a href="#" id="myPopover" data-toggle="popover" data-title="IP Details" data-api-parameter="151.101.1.69">Hover here for details on IP 151.101.1.69</a>

這假定您信任API提供的數據。如果不是，您將需要轉移返回的數據來緩解XSS攻擊。

Answer 7

我發現Bootstrap popover content cannot changed dynamically，它介紹了setContent函數。因此，我的代碼（希望有用的人）是：

（注意到jQuery的數據（）是不是這樣設定好，因爲它越來越）

// Update basket 
current = $('#basketPopover').data('content'); 
newbasket = current.replace(/\d+/i,parseInt(data)); 

$('#basketPopover').attr('data-content',newbasket); 
$('#basketPopover').setContent(); 
$('#basketPopover').$tip.addClass(popover.options.placement);