Take the 2-minute tour ×

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?


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

                $( "#selectable" ).dblclick(function(){
                    // do something here

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

Thank you very much!!

share|improve this question
You're never going to be able to make a page work well when elements are trying to handle both single- and double-click. The code will be too complicated, browsers don't cooperate, and users will absolutely hate it. –  Pointy Feb 27 '11 at 15:41

6 Answers 6

up vote -3 down vote accepted

In jQuery you can link events, like this:

$( "#selectable" ).selectable().dblclick();

Bit I'm not sure this will work, because both events are click events.

share|improve this answer
This is not "linking events". It's just calling two functions, one after the other. It's called "chaining" and has nothing to do with events. –  Mark Wilden Apr 18 '12 at 2:59

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.

  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').click(function() {

  // you might also want to trigger selectablestop.
share|improve this answer

You just need to set the distance to a number > 0 to register clicks and double-clicks.

    distance: 1

See http://forum.jquery.com/topic/selectable-dosn-t-fire-click-event

share|improve this answer
This was a neat way of doing it but stops the mouse click selection –  izip Oct 8 at 17:52
$("#selectable li").mousedown(function(event) {

            return false;
            $(this).data('oneclck', 1);
                $(event.currentTarget).data('oneclck', 0);
            }, 200);
share|improve this answer
thenks for solution... –  misima Oct 12 '11 at 1:41

This is because onmousedown triggers selection event (the dotted div that selects multiple selectable elements.) I had the same problem and i fixed it by adding a few lines of the code to the JQUERY UI library. What you have to do is to delay selection event by starting it after the mouse moves a few pixels. This allows you to double click element and still have the selection that is user friendly! :D

This is the part of the code that delays the selection and solves your problem:

    var content = $('#content').selectable();

    var _mouseStart = content.data('selectable')['_mouseStart'];

    content.data('selectable')['_mouseStart'] = function(e) {
        _mouseStart.call(this, e);
            "top": -1,
            "left": -1

I found this workaround in this post

share|improve this answer

I use this and I think it's the best solution.

    filter: "li"

    var n = ($(e.toElement).is(".ui-selected")) ? 1 : 0;
    $("#filelist").selectable( "option", "distance", n );

When the user starts a click on a selected elements I set the distance to one so that the doesn't blocks the double click event, but I available if the user really starts selecting.

share|improve this answer

Your Answer


