Jquery Cannot Bind Click Event On Selectable

Question

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

&

Solution 1:

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.

Solution 2:

This would work for:

<olid="selectable-a"><li><divclass="a-item">1</div></li></ol>

For yours, use:

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

or even just

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

if you don't use .a-item elsewhere

Solution 3:

If you use the following jQuery selector it works:

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

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

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

Solution 4:

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.

Baca Juga

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.com/selectable/#option-distance

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

Solution 5:

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

JavaScript Test