如何在一個twitter-bootstrap html頁面上獲得多個popovers

Question

我使用twitter-bootstrap獲得一個HTML頁面。我已經能夠獲得工具提示和彈出工作，並且能夠將一些自定義CSS樣式添加到彈出窗口。

現在我想添加3個按鈕到點擊觸發3個彈出窗口的頁面。

我已經添加了此代碼到每個3個按鈕：

<a class="btn btn-default" href="#" role="button" id="st-popover" data-toggle="popover" rel="popover" title="<strong>Ideal for:</strong> Clients who no longer need an equity line of credit and are in a financial position to begin repaying their balance with the new monthly payments.<br /><br /><strong>What:</strong> Begin to pay off the balance of your existing equity line of credit when the draw period ends.<br /><br /><strong>Get started:</strong> Continue to make regular payments under the repayment period terms of your existing home equity line of credit; no further action is required." data-placement='bottom' data-html='true'>Learn More</a> 

但問題似乎是，只有在DOM的第一個按鈕酥料餅觸發上點擊。另外兩個人只是坐在那裏無所事事。

這是我在底部的腳本：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script src="dist/js/tooltip.js"></script> 
<script src="dist/js/popover.js"></script> 
<script> 
$(function(){ 
     $('#st-popover').popover(); 
}); 
</script> 

任何獲得3到一個頁面或任何資源上工作來看待，將不勝感激幫助，謝謝。

Answer 1

當jQuery使用一個id作爲選擇器時，它會在找到第一個之後停止搜索。由於有多個btn，因此請使用類而不是id。

所以嘗試改變id="st-popover"到class="st-popover"

而且$('.st-popover').popover();