How can I exclude anchor tags from jQuery UI Selectable?

Question

I'm making a calendar with jQuery selectable, so you can select the li items and add events to the dates selected.

Within each li is an anchor tag that I want to add a javascript onclick function to it - but the jQuery UI selectable function seems to be conflicting.

How do I exclude item's that the jQuery UI selectable function is applied to? I am trying to use the 'NOT' selector but it's not working...

Here is a snippet from my code:

            <ol id='selectable' class='selectable'>
                <li class='ui-widget-content' data-date='' date-uid=''>
                    <span class='dayOfWeek disabled'>1</span>
                    <span class='dayName disabled'>Thursday</span>
                    <a href='#' data-travel-day-id='' class='close' onclick='alert("hi");return false;'></a>
                </li>
            </ol>

           $(function () {
            $("#selectable").selectable();
           });

So I'm just trying to get my 'hi' message to popup and for it to not select that list item when they click the anchor tag.

Any ideas?

Cheers

Answer 1

$("#selectable").selectable({
  cancel: "a.close"   
});

jQuery UI selectable option: Cancel