如何在点击时显示弹出框? [英] How to show popover on click?

问题描述

我目前正在使用 Siwapp 的 0.5 版本，我正在尝试为发票表每一行上的付款按钮.但我必须点击一下.我有以下 JS 代码:

I'm currently working in the 0.5 version of Siwapp and I'm trying to show a popover for the payments button on each row of a invoices table. But I have to do it with a click. I have the following JS code:

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是这样的(见最后链接):

The table HTML is like this (see the link at the end):

<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>

如果我删除手动"触发器，它会起作用，但如果我设置它，则不会.

If I remove the "manual" trigger it works but if I set it, it doesn't.

有人知道怎么做吗?谢谢！

Anyone knows how to do this? Thanks!

推荐答案

Popover 将自动处理您手动执行的一些操作，这可能会导致一些奇怪的冲突.当它自己可以做到这一点时，您会不必要地添加自己的点击处理程序，并且您正在包装似乎没有必要的整个设置功能.尝试这样的事情:

Popover will handle automaticaly some of what you're doing manually, and it's probably causing some weird conflicts. You're adding your own click handler unnecessarily when it can do that itself, and you're wrapping the whole setup function which doesn't seem necessary. Try something like this:

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

这篇关于如何在点击时显示弹出框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！