How to enable dblclick event on elements which was binded with JQuery UI Selectable plugin?

Question

In my case,I have an UL with JQuery UI Selectable plugin applied,but at the same time ,I want the item witch was binded with selectable plugin was doing something when I double click this item.But it seems that the JQuery UI Selectable plugin had block the dblclick event. So,how can I make it work?

E.g:

<script>
    $(function() {
        $( "#selectable" ).selectable();

                $( "#selectable" ).dblclick(function(){
                    // do something here
                })
    });
    </script>

<ul id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
</ul>

Thank you very much!!

Answer 1

If you add .ui-selected to cancel options passed into selectable method then you can double click b/c it will not raise selecting event on .ui-selected items.

$('#selectable').selectable({ 
  cancel: '.ui-selected' 
});

Although, this does take away the ability to deselect a selected item. You could do the following to manually deselect

$('.ui-selected').on('click', function() {
  $(this)
    .removeClass('ui-selected')
    .parents('.ui-selectable')
    .trigger('selectablestop');

  // you might also want to trigger selectablestop.
});