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">Google</a>
    </li>
    <li>
        <p>Visit Apple.</p>
        <a href="http://www.apple.com">Apple</a>
    </li>
    <li>
        <p>Visit Microsoft.</p>
        <a href="http://www.microsoft.com">Microsoft</a>
    </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

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'
    });
});