How to use onclick event on a list (jqueryui-selectable)?

Question

I created a simple script with jqueryui-selectable list. I generate a selectable list and assign each list with an onclick function. It seems that the onclick event was not triggered when I clicked the list. Any idea to solve this problem?

Thanks,

my script:

$(document).ready(function() {
$("#myButton").button();
});

function generate(){
var $content=$("<ol id='selectable'>");
for (a=0;a<3;a++)
{
$content.append("<li class='ui-widget-content'  onclick='myFunction()'>item"+a+"</li>");
}
$content.append("</ol>");
$("#myList").append($content);
$('#selectable').selectable();
}

function myFunction()
{
alert("Hello World!");
}

my style:

#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable  .ui-selected { background: #F39814; color: white; }
#selectable  { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable  li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

my html:

<div id='myList'/>
<button id="myButton" onClick="generate()">Generate List</button>

Answer 1

Since the element is dynamically created, it needs to be delegated. You can do this in jQuery by:

$(document).on("click",".ui-widget-content", myFunction()); 

(Or just use an anonymous function)

$(document).on("click",".ui-widget-content", function() {
    alert("Hello World!");
}); 

Answer 2

You should use selecting event. See example here http://jsfiddle.net/Pa4NK/

Answer 3

The selectable adds a helper div to display the lasso. But the helper div is positioned under the mouse, which prevents the click from hitting the underlying element. Even though the helpers width and height are set to 0, this seems to cause the problems.

Change the distance option will solve the issue http://api.jqueryui.com/selectable/#option-distance

$( "#selectable" ).selectable({
 distance: 1
});

& Then implement what the selectable() function does

    $('.ui-widget-content').on("click", function () {
        $('.ui-widget-content').removeClass('ui-selected');
        $(this).addClass('ui-selected');
    });