我目前正在使用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>
如果我删除“手动”触发器它可以工作,但如果我设置它,它不会。
任何人都知道如何做到这一点?谢谢!
答案 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)