2011-10-24 101 views
1

我目前正在使用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> 

如果我刪除了「手動」觸發它的工作原理,但如果我設置它,它不。

任何人都知道如何做到這一點?謝謝!

回答

7

彈出窗口會自動處理你正在做的一些手動操作,它可能會導致一些奇怪的衝突。你可以自己添加你自己的點擊處理程序,並且你正在包裝看起來不需要的整個設置功能。嘗試這樣的:

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