Question

我一直在努力让bootstrap popover插件在多个共享同一个类的元素上运行。现在它是大灰色块级别的“更多信息”按钮。你可以找到链接 here

以前popover工作的时候它是一个像id="pop"这样的单一id和以下JavaScript：

$(document).ready(function() {
   $('#pop').popover()
});

然而，当我更改将“更多信息”from id="pop"更改为class="pop"的2个按钮并相应地修改JavaScript时，popover会停止处理多个按钮：

$(document).ready(function() {
   $('.pop').popover()
});

<a class="btn btn-block pop" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="top" data-toggle="popover" data-original-title="Popover on right">More Information</a></p>

是不是popover插件不能在具有相同类的多个元素上工作？如果你查看我提供的链接，就没有控制台错误。

Answer 1

你可以使用这样的东西：

$('.pop').popover({
    html: true,
    content:mycontent,
    trigger: 'manual'
}).click(function(e) {
    $(this).popover('toggle');
    e.stopPropagation();
});

just check my jsfiddle

Answer 2

在javascript中：

$(document).ready(function() {
  options = {
   placement: 'top',
   trigger : 'click'
  }
  $('[rel="popover"]').popover(options);
});

在Html中：

<p><a class="btn btn-block pop" rel="popover" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="Popover on right">More Information</a></p>

<p><a class="btn btn-block pop" rel="popover" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="Popover on right">More Information</a></p>

Bootstrap popover不适用于类，但可以使用id

2 个答案: