This should be very simple, but I am unavailable to retrieve click event and fire a function on a selectable item for JQuery UI.

<div id="a">
<ol id="selectable-a">
  <li class="a-item">1</li>
  <li class="a-item">2</li>
  <li class="a-item">3</li>
  <li class="a-item">4</li>
</ol>
</div>

Javascript:

$("#selectable-a").selectable();

$("li .a-item").click(function () {
  console.log("Executing mand");
});

But the click event is never fired.

I have look into Google for that.

• try to replace .click( by .bind('click', but it does not change anything
• In the jquery forum they raise this problem and someone gives a solution tweaking the inner functionning, which does not work for me (content.data('selectable') is always undefined, no matter what)
• Setting the distance to 1, meaning that the user needs to move a mouse by 1 pixel so that the event is fired, is a bad idea.
• This SO question does not have any satisfactory answer. Namely, I don't just want to get the click event on a selected item, but on any item.

Any idea on how to solve the problem?

This should be very simple, but I am unavailable to retrieve click event and fire a function on a selectable item for JQuery UI.

<div id="a">
<ol id="selectable-a">
  <li class="a-item">1</li>
  <li class="a-item">2</li>
  <li class="a-item">3</li>
  <li class="a-item">4</li>
</ol>
</div>

Javascript:

$("#selectable-a").selectable();

$("li .a-item").click(function () {
  console.log("Executing mand");
});

But the click event is never fired.

I have look into Google for that.

• try to replace .click( by .bind('click', but it does not change anything
• In the jquery forum they raise this problem and someone gives a solution tweaking the inner functionning, which does not work for me (content.data('selectable') is always undefined, no matter what)
• Setting the distance to 1, meaning that the user needs to move a mouse by 1 pixel so that the event is fired, is a bad idea.
• This SO question does not have any satisfactory answer. Namely, I don't just want to get the click event on a selected item, but on any item.

Any idea on how to solve the problem?

• javascript
• jquery
• jquery-ui
• onclick
• selectable

5 Answers 5

Use $("li.a-item") instead of $("li .a-item")

The first one looks for a li with the a-item class ; the second looks for an element with the a-item class inside a list element.

This would work for:

<ol id="selectable-a">
  <li><div class="a-item">1</div></li>
</ol>

For yours, use:

$("li.a-item").click(function () {
  console.log("Executing mand");
});

or even just

$(".a-item").click(function () {
  console.log("Executing mand");
});

if you don't use .a-item elsewhere

If you use the following jQuery selector it works:

$("#selectable-a li").click(function () {
   console.log("Executing mand");
});

This has the added benefit that you don't need an extra class for the list items anymore

Example: http://jsfiddle/9brPn/1/

Automatically, the selectable adds a helper div to display a lasso with the class .ui-selectable-helper. This helper div is positioned right under the mouse. My best guess is that it's created on a mousedown and then interferes with the clicking.

I am working on a better fix, but for now, I am using this:

.ui-selectable-helper{
  pointer-events:none;
}

Also, change your selector to : $("li.a-item") And NOT $("li .a-item")

[notice the space is not correct in your code]

[EDIT] Better fix : From http://api.jqueryui./selectable/#option-distance

Add the option distance into your initialization as $("#selectable-a").selectable({distance:10});

I have the same problem bro! I found the perfect solution:

My code was:

$( "#selectable" ).selectable();
$('li.slot').on('click', function() {
    var selected_date = $(this).attr('data');
    console.log('selected item: ' +  selected_date); // open the console to see the selected items after each click
    $('#appointment_start').val(selected_date);
});

And now is:

$( "#selectable" ).selectable({
    selected: function( event, ui ) {
        var selected_date = $(ui.selected).attr('data');
        console.log('selected item: ' +  selected_date); // open the console to see the selected items after each click
        $('#appointment_start').val(selected_date);
    }
});

For me it works perfectly :)