jquery - 如何在与 JQuery UI Selectable 插件绑定(bind)的元素上启用 dblclick 事件？

Question

就我而言，我有一个应用了 JQuery UI Selectable 插件的 UL，但同时，我希望与 selectable 插件 绑定(bind)的项目正在执行当我双击这个项目时发生一些事情。但似乎JQuery UI Selectable插件已经阻止了dblclick事件。那么，我怎样才能让它发挥作用呢？

例如:

<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>

非常感谢!!

Answer 1

如果您添加 .ui-selected 来取消传递给可选方法的选项，那么您可以双击 b/c​​，它不会引发 .ui-selected 项目上的选择事件。

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

尽管如此，这确实剥夺了取消选择所选项目的能力。您可以执行以下操作来手动取消选择

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

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