jQuery UI selectable, links not being followed on click

Question

Using the jQuery UI library selectable(). Links within the selectable list items are not being followed on click, only by right clicking and opening in new window or tab.

HTML

<ul class="selectable-list">
    <li>
        <p>Visit Google.</p>
        <a href="http://www.google.com"&gt;Google&lt;/a&gt;
    </li>
    <li>
        <p>Visit Apple.</p>
        <a href="http://www.apple.com"&gt;Apple&lt;/a&gt;
    </li>
    <li>
        <p>Visit Microsoft.</p>
        <a href="http://www.microsoft.com"&gt;Microsoft&lt;/a&gt;
    </li>
</ul>

CSS

.selectable-list li.ui-selected, .selectable-list li.ui-selected:hover {
    background-color: #ccc;
}

JS

$(document).ready(function(){

    $(".selectable-list").selectable();

});

Answer 1

Selectable is overriding your click events on the href. You're probably going to have to add back in the navigate functionality.

However, that seems like odd behavior you are shooting for. Why would I ever want to both select something and follow a link (presumably to a new window, which would then take focus) at the same time?

Answer 2

The selectable() method takes an option called cancel. By default, it is ":input,option", but you can use it to make your anchors not applicable to the selectable event.

For your code:

$(document).ready(function() {
    $(".selectable-list").selectable({
        cancel: 'a'
    });
});

Answer 3

The tip about the 'cancel: a' exactly did the trick for me.

I guess this functionality is not too strange. I am working on a photo application and I have clickable thumbnails that take you to a larger version, but there are also selectable 'handles' that let you create a selection of images to take some action on (tag, delete, move, etc).

That being said, I am tempted to request or work on adding some more features to the plugin. I would expect ctrl-click on a selected element to unselect.

Again, thanks for the tip!