JQuery selectable and links inside the selected item

Without a doubt the JQuery library is the most used Javascript framework for creating interactive web applications. Personally, I’m also a big fan of the JQuery UI Library and all it’s effects. Just makes it easy and straight forward to build interactive apps.

Recently, I’ve added the “selectable” effect. The jQuery UI Selectable plugin allows for elements to be selected by dragging a box (sometimes called a lasso) with the mouse over the elements. While this is working like advertised, I’ve came upon the issue that any link inside a selectable element was not working anymore. When I clicked on the link inside, it always called the function that I defined in the selectable() options.

After reading trough the whole docs, I’ve finally found out that one needs to tell the selectable() options to cancel it for links. Since we are all fans of real code, here is the solution:

[code]$("#selectme").selectable({
cancel: ‘a’,
stop: function(event, ui) {
}
});[/code]