[ understanding jquery ui events ]
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
Answer 2
.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.