javascriptjqueryjquery-uionclickselectable

JQuery Cannot bind click event on selectable


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.

Any idea on how to solve the problem?


Solution

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