Javascript 如何在列表上使用onclick事件（jqueryui可选）？

我用jqueryui可选列表创建了一个简单的脚本。我生成一个可选列表，并为每个列表分配一个onclick函数。当我单击列表时，似乎没有触发onclick事件。有解决这个问题的办法吗

谢谢

我的剧本：

$(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!");
}

我的html：

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

生成列表

由于元素是动态创建的，因此需要对其进行委派。您可以通过以下方式在jQuery中执行此操作：

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

（或者只使用匿名函数）

---

您应该使用

选择
事件。
参见这里的示例
可选选项添加一个助手div以显示套索。但是helper div位于鼠标下方，这样可以防止单击击中底层元素。即使助手宽度和高度设置为0，这似乎也会导致问题

更改“距离”选项将解决此问题

&然后实现selectable（）函数的功能

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

我还有一个问题。实际上，我想将变量“a”的值从列表生成传递给myFunction。例如，myFunction将如下所示：function myFunction（msgNo）{alert（msgNo）；}是否可以执行此操作？这是正确的选项。您有选择和取消选择事件，例如（）
$(document).on("click",".ui-widget-content", function() {
    alert("Hello World!");
}); 

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

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