understanding jquery ui events

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

.bind will help you bind the event post-creation. If you know what function you want to be applied at the time of creation, you should use the option declaration, in my opinion.

I hope this helps: http://jsbin.com/olofi3/

Update

Sorry for the broken link. I'm not sure why, but JS Bin is just not working for me anymore. The code that I had tried to link you to was roughly:

$("img").selectable({
  stop: function(event, ui) { alert('something was selected') }
});

​ Update's Update

Apparently, it's just my Chrome that's not playing well with JS Bin. Oh well, the original link has been updated and replaced. Sorry for any inconvenience.

Answer 2

In second example - first row will do nothing, and as for the second - there is no selected event in $("#somedivtag"). Selectable is a function and it gets delegate as param and then raise that function on some internal event.

Answer 3

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