How to capture selection event in jQueryUI selectable?

Question

I have a few links on a webpage. They open a similar dialog window and load equal content via $.load(). Content has ul list and it use $.selectable() plugin:

$('.select-dialog-cities > ul').selectable({filter: 'li'});

I would like to handle the selectableselected event. As I have three links, I need to separate the events. Is it possible without global flags? Something like this:

$("#dialog_id .select-dialog-cities > ul").on("selectableselected", function(event, ui){});

Answer 1

Depending on what you're trying to achieve, you might also just query which elements are actually selected, like this:

$("#selectable").on("selectableselected", function(event, ui){
    $('.ui-selected').each(function(){
        console.log($(this).text());
    });
});

Example on JSFiddle

If you're doing this on different dialog windows, you will probably need to bind to the event every time you create a new dialog window.

Answer 2

To capture that event you should provide a function to the selected property of the object you initialise selectable with. Try this:

$('.select-dialog-cities > ul').selectable({
    filter: 'li',
    selected: function(e, ui) {
        console.log('You chose something!');
    }
});

You can get information about the element that raised the event via the selected property of the ui parameter passed to the function.

More info in the jQueryUI Docs