如何在一个推特引导 html 页面上获得多个弹出窗口以工作

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();