Question

The following is an excerpt from jQuery documentation

Code examples

Supply a callback function to handle the selected event as an init option.
$( ".selector" ).selectable({
   selected: function(event, ui) { ... }
});
Bind to the selected event by type: selected.
$( ".selector" ).bind( "selected", function(event, ui) {
  ...
});

I tried writing the following:

$("#somedivtag").selectable(); 
$("#somedivtag").bind("selected", function(event, ui) {
                  alert('something was selected');
                  return;  });

but the alert does not show up.

I don’t think I actually understand the difference between supplying a callback and binding.

Any help would be great.

Thanks.

Answer 1

It appears that the documentation is wrong, try adding “selectable” in front of the bind events (if they don’t have one):

$("#somedivtag").selectable(); 
$("#somedivtag").bind("selectableselected", function(event, ui) {
 alert('something was selected');
 return;
});

Here is a complete list of the jQuery UI Selectable events:

selectableselected
selectableselecting
selectablestart
selectablestop
selectableunselected
selectableunselecting

---

I also wanted to mention that custom widgets will also have a different triggered event name… For example, the autocomplete widget has a “catcomplete” example which starts with this code:

$.widget( "custom.catcomplete", $.ui.autocomplete, { /**/ }

The events triggered by the custom widget will start with “catcomplete” and not “autocomplete”. This example binds to the custom widget “select” event:

$( "#search" ).on('catcompleteselect', function(e) {
  console.log(e.type);
});