javascript - Using jQuery selectable on table rows, links in table not working - Stack Overflow

admin管理员组

文章数量:1336193

I want to use jQuery Selectable to select rows from a table. The problem is that jQuery seems to hijack all click events so that I can't use anything clickable (links in my case) inside the table.

Html:

<table class="sel-table">
<thead>
    <th>col1</th>
    <th>col2</th>
    <th>col3</th>
</thead>
<tbody>
    <tr>
        <td> 
             <a href="">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: /

When you click the link, nothing happens, selectable processes the event instead. However, the middle button (open in new tab) works perfectly. What's preventing the default action on link and how can I fix it?

I want to use jQuery Selectable to select rows from a table. The problem is that jQuery seems to hijack all click events so that I can't use anything clickable (links in my case) inside the table.

Html:

<table class="sel-table">
<thead>
    <th>col1</th>
    <th>col2</th>
    <th>col3</th>
</thead>
<tbody>
    <tr>
        <td> 
             <a href="http://www.google.">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/qt67rf12/

When you click the link, nothing happens, selectable processes the event instead. However, the middle button (open in new tab) works perfectly. What's preventing the default action on link and how can I fix it?

• javascript
• jquery
• html
• jquery-ui-selectable

Share Follow asked Aug 31, 2014 at 18:59 Jan HadáčekJan Hadáček 18744 silver badges88 bronze badges 1

• See my solution here: stackoverflow./questions/25419263/… – Gjermund B. Dahl Commented Oct 18, 2017 at 21:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You can use the cancel option

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

Updated fiddle.

Here is the documentation

本文标签： javascriptUsing jQuery selectable on table rowslinks in table not workingStack Overflow