title: JQuery Cannot bind click event on selectable
body: <p>This should be very simple, but I am unavailable to retrieve click event and fire a function on a <a href="http://jqueryui.com/selectable/" rel="nofollow noreferrer"><code>selectable</code></a> item for JQuery UI.</p>
  
  <pre><code>&lt;div id="a"&gt;
  &lt;ol id="selectable-a"&gt;
    &lt;li class="a-item"&gt;1&lt;/li&gt;
    &lt;li class="a-item"&gt;2&lt;/li&gt;
    &lt;li class="a-item"&gt;3&lt;/li&gt;
    &lt;li class="a-item"&gt;4&lt;/li&gt;
  &lt;/ol&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$("#selectable-a").selectable();
  
  $("li .a-item").click(function () {
    console.log("Executing command");
  });
  </code></pre>
  
  <p>But the click event is never fired.</p>
  
  <p>I have look into Google for that.</p>
  
  <ul>
  <li>try to replace <code>.click(</code> by <code>.bind('click',</code> but it does not change anything</li>
  <li><a href="http://forum.jquery.com/topic/selectable-dosn-t-fire-click-event" rel="nofollow noreferrer">In the jquery forum</a> they raise this problem and someone gives a solution tweaking the inner functionning, which does not work for me <code>(content.data('selectable')</code> is always undefined, no matter what)</li>
  <li>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.</li>
  <li><a href="https://stackoverflow.com/q/5133966/1287856">This SO question</a> 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.</li>
  </ul>
  
  <p>Any idea on how to solve the problem?</p>