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.

<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 command");
});

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?

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