twitter-bootstrap – Twitter Bootstrap PopOver仅适用于第一个

发布时间：2020-12-17 21:27:04 所属栏目：安全来源：网络整理

导读：我一直在使用Twitter Bootstrap来构建站点的基本布局.我需要显示一个数据表,其中每个订单项都有一个我想要显示为弹出窗口的数据属性如： tr tda href="#" class="popover-test" id ="test" rel="popover" data-content="Content 1: this shows fine!" data-

我一直在使用Twitter Bootstrap来构建站点的基本布局.我需要显示一个数据表,其中每个订单项都有一个我想要显示为弹出窗口的数据属性

如：

<tr>
  <td><a href="#" class="popover-test" id ="test" rel="popover" 
            data-content="Content 1: this shows fine!" data-original-title="Title 1">Hover for popover</a>
  </td>
  <td>two</td>
  <td>three</td>
</tr>
<tr>
  <td><a href="#" class="popover-test" id ="test" rel="popover" 
            data-content="Doesn't show :(" data-original-title="Title 2">Hover for popover</a>
  </td>
  <td>two</td>
  <td>three</td>
</tr>

虽然弹出窗口只能与列表中的第一个元素一起使用.看到这个jsfiddle：http://jsfiddle.net/stycu/

有谁知道这是设计还是这是一个错误？我已经检查了github上的问题,但看不到任何引用它的东西.

提前致谢

解决方法

$(function() {
    $("#test").popover();
});

您在调用时引用了#test的id,并且每个元素的id必须是唯一的,因此只显示第一个popover.

使用属性选择器来定位您的rel popover属性或类.

$(function() {
    $('[rel="popover"]').popover();
});

Demo

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!