Instead of toggling a Jquery-Selectable on and off, how can I add another toggle option -

i've been scouring web solution on how this, i'm not getting leads @ all. of terms keep overlapping others; (e.g. html-select, adding-options, jquery-multiselect). figured it's common too, @ least posted on blog, tricky find.

the issue: wanna able add class selectable rotation in jquery selectable. right rotation of know toggling "ui-selected" on/off. [there ui-selecting, i'm referring end result]. ultimately, i'm trying add additional grouping. (e.g. "none-selected", "selected-with-a-click", "selected-with-two-clicks"). when serialize application, have 2 lists send.

      //note: not real syntax color styling     <li class="hlight ui-selectee"/> *no click*     <li class="hlight ui-selectee ui-selected" style="blue"/> *one click*     <li class="hlight ui-selectee ui-alt-selected" style="green"/> *two-clicks  

the research: far i've found or been playing binding click action control this.

      $('.hlight').bind("click",(function(){ alert($(this));});     $('.hlight').click(function(){alert("print plz!");});   

however these aren't firing off in code or browser console.

then found out "selected", tried following... [but in end, alters how "unselected" works, , skips phase if item.hasclass("ui-selected") always.]

      $(function() {             $('#selectable').selectable({                 filter:".hlight",                 selected: function(event, ui){                     var item = $(ui.selected);                     if (item.hasclass('ui-alt-selected')){                         item.removeclass('ui-alt-selected');                         item.removeclass('ui-selected');                     } else if (item.hasclass('ui-selected')){                              item.removeclass('ui-selected');                             item.addclass('ui-alt-selected');                         } else {                               item.addclass('ui-selected');                         }                 }});         });  

i admit i'm new using jquery much, , have snitch of understanding of it's practices. how able add class jquery selectable rotation, , ideal way this?

so, kind of gave on whole trying manipulate jquery selectable widget have click-through options.

what ended doing letting jquery modify line-items (li) on-clicks. moment, i'm still not sure if selectable jquery widget deactivated click features, or possibly occupied , didn't let me override function.

my solution:

      //honestly, i'm pretty confident isn't needed. leaving reference.     $('#selectable').selectable({          filter : ".hlight"             disabled : true,     });      //what have in code     $('.hlight').on("click",fucntion(){         if( !$(this).hasclass('ui-selected') && !$(this).hasclass('ui-alt-selected')){             $(this).addclass('ui-selected');         } else if( $(this).hasclass('ui-selected') ){                 $(this).removeclass('ui-selected');                 $(this).addclass('ui-alt-selected');             } else {                 $(this).removeclass('ui-selected');                 $(this).removeclass('ui-alt-selected');             }     });  

and of course styling (css)

      .hlight :hover {background-color:lightblue;color:white;}     .ui-selected {background-color:orange;color:white;}     .ui-alt-selected {background-color:red; color:white;}