Using jQuery selectable on table rows, links in table not working

Question

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

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?

See my solution here: https://stackoverflow.com/questions/25419263/propagation-issue-in-nested-jquery-ui-selectable/46819120#46819120 — Gjermund Dahl, Oct 18 '17 at 21:03

score 6 · Accepted Answer · answered Aug 31 '14 at 19:05

6

You can use the cancel option

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

Updated fiddle.

Here is the documentation

answered Aug 31 '14 at 19:05

karthikr

97,368
26
197
188

In that fiddle, the link does not work for me. But if I change the href of the link to 'google.com', it does. Weird. – iabw Aug 31 '14 at 19:10
Check the console log in the fiddle, you will know why. – karthikr Aug 31 '14 at 19:12

Using jQuery selectable on table rows, links in table not working

1 Answers1