Bootstrap 3的弹出框能否使用外部div作为内容？

Question

这里所有的例子 http://getbootstrap.com/javascript/#popovers 都使用 data-content 属性来设置弹出框中的内容。

我想要做的是在我的页面上设置一个隐藏的 div ，并从弹出框触发器中引用它，例如：

<div id="myPopoverContent">
   ...stuff...
</div>

然后

<a ng-href="" data-toggle="popover"><span class="badge">12</span> You have 12 messages.</a>

作为触发器。 但如何触发？

- Steve

---

发送一个 AJAX 调用，然后在成功后以编程方式触发点击。 - Ehsan Sajjad

可能是Is it possible to use a div as content for Twitter's Popover的重复问题。 - pennstatephil

我看了那篇文章，但它并不完全符合我的要求。 - Steve

Answer 1

使用 popover 函数的 content 选项来传递内容：

{
    content: $('#myPopoverContent').text()
}

为了能够使用HTML内容，请使用：

{
    content: $('#myPopoverContent').html(),
    html: true
}

我为您准备了一个工作示例。

- Raphael Schweikert

---

只是一点提示：当使用.popover(options)函数时，您不需要data-toggle="popover"或点击事件。但除此之外，做得很好！+1 http://jsfiddle.net/7ekRN/2/ - Tricky12

我知道。我只是不想动 OP 的 HTML。 - Raphael Schweikert

不错。能否将其概括化，以便我只需一个jQuery函数来调用以触发元素命名的div？假设我创建data-pop="#myDiv" 来调用 div id="myDiv"，并为另一个不同的div使用不同的data-pop属性- 使用相同的jQuery处理程序。如果可能的话，我宁愿不为每个弹出窗口都设置一个处理程序。谢谢。 - Steve

是的，如果您将content选项制作为一个函数：{content: function() { return $(this.dataset.pop).html(); }), html: true}，那么这应该可以工作。 - Raphael Schweikert

太棒了，谢谢。当我尝试添加你的代码时，括号或圆括号出现错误，但最终它运行得很好：http://pastie.org/9112266 - Steve

今天你救了我的一命，谢谢！ - TeaCoder