21

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();

});

2 Answers 2

42

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'
    });
});
2
  • Is there possible for me to resume the selectable after I get to the desired link?
    – windsound
    Jan 6, 2013 at 17:52
  • 2
    I up voted this. But then figured out the delay option is better for my use case. api.jqueryui.com/selectable/#option-delay
    – Doug
    Nov 11, 2013 at 0:16
0

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?

5
  • Yes, I see that selectable is overriding the normal click functionality of the link. The question then is what are some suggestions on the best way to fix it? The user will select items in a list to save to a personalized list. The selectable() interaction shows which items have been selected so far. They may also choose to follow the link in the list item.
    – jerome
    Oct 12, 2009 at 17:35
  • Well, having it automatically follow the link is probably not what you want from a UI standpoint. If it is, then use Jquery more to expand the OnClick functionality after you call .selectable(). However, I'd recommend having either the link be active with (select) afterwards, or vice versa, where the click is a select, but you add a (open url) link on the same line with an on click to open the URL. Oct 12, 2009 at 17:43
  • I appreciate your recommendations on the UI behavior. The actual code that I am working on consists of a list item wrapping a link to an article and a longer description of an article entry, followed by a date stamp for that article. So the content within the li is bigger, and it is the li that is selectable, not the link itself. Perhaps that description will help you imagine what I am trying to do. Do you have a specific recommendation on how to leave the li as a whole selectable, while retaining (or re-adding) the link functionality?
    – jerome
    Oct 12, 2009 at 17:50
  • Yes, it does make a lot more sense now. I see where you are going with it. I do not have a specific recommendation. Start with overriding the onlick for just that element, I recommend by adding and onlick('hi') to the sub elements, after you call selectable(). That's where I'd start. I do not know specifically how sub-element click events are handled in priority with parent elemetn click events. Oct 12, 2009 at 18:01
  • seems like odd behavior, not really considering its how a desktop UI works. Some of us need to replicate that behavior in web UI applications
    – Ari
    Jul 29, 2019 at 2:57

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.