如何在点击时显示popover?

时间:2011-10-24 19:47:09

标签: jquery html css twitter-bootstrap

我目前正在使用Siwapp的0.5版本,我正在尝试在发票表的每一行上显示支付按钮的弹出窗口。但我必须点击一下。我有以下JS代码:

jQuery(function($){

  $('table[data-type="invoices"] a.payments').popover({
    live: true,
    placement: 'left',
    offset: 5,
    html: true,
    content: function() {
      return $(this).attr('class');
    },
    trigger: 'manual'
  }).live('click', function(e){
    e.preventDefault();
    $(this).popover('show');
  });

});

表格HTML是这样的(参见最后的链接):

<table class="zebra-striped align-middle" data-type="invoices">
  <colgroup>
    <col />
    <col />
    <col class="date" />
    <col class="date" />
    <col class="status" />
    <col class="currency" />
    <col class="currency" />
    <col class="payments" />
  </colgroup>
  <thead>
    <tr>
      <th>{% trans %}Number{% endtrans %}</th>
      <th>{% trans %}Customer{% endtrans %}</th>
      <th>{% trans %}Date{% endtrans %}</th>
      <th>{% trans %}Due Date{% endtrans %}</th>
      <th>{% trans %}Status{% endtrans %}</th>
      <th>{% trans %}Due{% endtrans %}</th>
      <th>{% trans %}Total{% endtrans %}</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ASET-22</td>
      <td>Roxxon</td>
      <td>5/28/11</td>
      <td>9/16/11</td>
      <td>
        <span class="label important">{% trans %}overdue{% endtrans %}</span>
      </td>
      <td></td>
      <td>$11,435.23</td>
      <td>
        <a href="{{ path('invoice_payments', { 'invoiceId': 4 }) }}" class="btn secondary icon clock payments" title="Payments">{% trans %}Payments{% endtrans %}</a>
      </td>
    </tr>
  </tbody>
</table>

如果我删除“手动”触发器它可以工作,但如果我设置它,它不会。

任何人都知道如何做到这一点?谢谢!

2 个答案:

答案 0 :(得分:7)

Popover会自动处理你手动做的一些事情,这可能会导致一些奇怪的冲突。你可以自己添加你自己的点击处理程序,而且你正在包装整个设置功能,这似乎没有必要。尝试这样的事情:

$('table[data-type="invoices"] a.payments').popover({
  live: true,
  placement: 'left',
  offset: 5,
  html: true,
  content: function() {
    return $(this).attr('class');
  },
  trigger: 'manual'
});

答案 1 :(得分:5)

只是一个更新:Bootstrap 2.1允许您提供click作为触发器。 (http://twitter.github.com/bootstrap/javascript.html#popovers