How to handle Event of "Selectable" in jQuery?

This is h开发者_StackOverflow中文版ow I create items in Selectable in jQuery isValid = new Array(list.size);

var div = document.getElementById("selectable");

for(i=0; i<list.size; i++)
{
    // It should look like that//<li class="ui-widget-content">Item 1</li>
    var properties = list[i].getProperties();
    var aTag = document.createElement("li"); //file name or something as ID
    aTag.setAttribute('class',"ui-widget-content");
    aTag.setAttribute('id',i);

    aTag.innerHTML = properties.fileName; //file name
    div.appendChild(aTag);
}

I tried the following two, but they both don't work:

 $(function () {
            $("#selectable").selectable();
        });

        $("#selectable").selectable({
            selected: function (event, ui) {
                var x = 0;
                x++;
            }
        });

The HTML part which should be filled

<div class="demo">
  <ol id="selectable">

  </ol>
</div>

Am I missing something? Thanks!

---

That one worked!

$(function () {
            $("#selectable").selectable({
                stop: function () {
                    var result = $("#select-result").empty();
                    $(".ui-selected", this).each(function () {
                        var index = $("#selectable li").index(this);
                        result.append(" #" + (index + 1));



                        $("#play").button("option", {
                            label: "pause",
                            icons: {
                                primary: "ui-icon-pause"
                            }
                        });

                    });
                }
            });
        });