在表行上使用jQuery可选,表中的链接不起作用

时间:2014-08-31 18:59:08

标签: javascript jquery html jquery-ui-selectable

我想使用jQuery Selectable从表格中选择行。问题是jQuery似乎劫持了所有点击事件,因此我无法在表格中使用任何可点击的内容(在我的情况下为链接)。

HTML:

<table class="sel-table">
<thead>
    <th>col1</th>
    <th>col2</th>
    <th>col3</th>
</thead>
<tbody>
    <tr>
        <td> 
             <a href="http://www.google.com">click me! a1</a>
        </td>
        <td>a2</td>
        <td>a3</td>
    </tr>
    <tr>
        <td>b1</td>
        <td>b2</td>
        <td>b3</td>
    </tr>
    <tr>
        <td>c1</td>
        <td>c2</td>
        <td>c3</td>
    </tr>
</tbody>
</table>

CSS:

  .ui-selectable>.ui-selected
    {
        background-color: #a6c9e2;
    }

使用Javascript:

$(".sel-table>tbody").selectable({filter: 'tr'});

JSFiddle:http://jsfiddle.net/qt67rf12/

单击链接时,没有任何反应,可选择处理事件。但是,中间按钮(在新选项卡中打开)可以很好地工作。什么阻止链接上的默认操作以及如何解决?

1 个答案:

答案 0 :(得分:5)

您可以使用cancel选项

$(".sel-table>tbody").selectable({
    filter: 'tr',
    cancel: 'a'
});

更新了fiddle

以下是documentation