title: How to trigger function for jquery selectable list elements
body: <p>I have a code where I implement a selectable buttons just like in the demo of jquery ui(<a href="http://jqueryui.com/selectable/" rel="nofollow">http://jqueryui.com/selectable/</a>). I want to trigger a function whenever an item is selected(Item 1, Item 2, etc). I have made several attempts, but nothing works. Could someone give me a help with this.
  I tried this:</p>
  
  <pre><code>$(".ui-selected ~ li").click(function() {
  alert("hello");
  });
  </code></pre>
  
  <p>also this one</p>
  
  <pre><code>$("#selectable li").live('click',function() {
  alert("hello");
  });
  </code></pre>
  
  <p>I have exactly this, but with other naming. What I want is to call a function when any 'selectable' item is selected.</p>
  
  <pre><code>    &lt;style&gt;
    #feedback { font-size: 1.4em; }
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
    &lt;/style&gt;
    &lt;script&gt;
    $(function() {
      $( "#selectable" ).selectable();
    });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;ol id="selectable"&gt;
    &lt;li class="ui-widget-content"&gt;Item 1&lt;/li&gt;
    &lt;li class="ui-widget-content"&gt;Item 2&lt;/li&gt;
    &lt;li class="ui-widget-content"&gt;Item 3&lt;/li&gt;
    &lt;li class="ui-widget-content"&gt;Item 4&lt;/li&gt;
    &lt;li class="ui-widget-content"&gt;Item 5&lt;/li&gt;
    &lt;li class="ui-widget-content"&gt;Item 6&lt;/li&gt;
    &lt;li class="ui-widget-content"&gt;Item 7&lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>