Bootstrap popover 仅针对多个位置一次答案

【问题标题】：Bootstrap popover only one time for multiple positionsBootstrap popover 仅针对多个位置一次
【发布时间】：2016-12-02 11:15:08
【问题描述】：

我的网站上有一张桌子。我想让用户可以轻松地将 cmets 添加到每一行。

为此，我在互联网上发现了一个漂亮的评论视图。

这是一个例子：

<div class="popover-markup">
  <a href="#" class="trigger btn btn-default" data-placement="right">Popover link</a>
  <div class="content hide">
    code
  </div>

</div>


$('.popover-markup>.trigger').popover({
  html: true,
  title: function() {
    return $(this).parent().find('.head').html();
  },
  content: function() {
    return $(this).parent().find('.content').html();
  }
});

http://jsfiddle.net/dzr521qs/424/

这基本上正是我想要的。但是...我需要在评论视图中使用一个表单来将数据发布到我的服务器。而且由于我在表中有大约 50-300 个条目，如果我必须为每一行放置弹出框的代码，它将生成大量代码。

所以我的问题是：

是否可以定义一次弹出框并始终显示相同的弹出框但每行显示不同的内容？

我想在每一行都有一个小图标，我可以打开弹出框并为弹出框提供一个 id 以加载动态内容。

希望有人有想法。

谢谢

【问题讨论】：

使您的小提琴链接成为实际链接而不是文本，并直接在问题中提供相关代码。（除了问题中的代码之外，小提琴很好）
完成...谢谢您的提示

标签： javascript jquery twitter-bootstrap popover

【解决方案1】：

您可以向弹出链接（例如data-target）添加其他属性，该属性将指向您要显示为内容的元素。

您可以在content()回调中提取data属性值，并使用它来显示不同的内容。

例子：

// inside popover(...)
content: function() {
    var contentSelector = $(this).data("target");
    if (contentSelector && $(contentSelector).length > 0) {
        return $(contentSelector).html();
    } else {
        return "<div class='alert alert-warning'>Please specify data-target attribute pointing to element in page</div>";
    }
}

// in your trigger add `data-target` attribute
<a ... data-target=".content">...

这是一个 updated fiddle 演示该解决方案

【讨论】：