javascript - 如何在列表上使用 onclick 事件(jqueryui-selectable)？

Question

我使用 jqueryui-selectable 列表创建了一个简单的脚本。我生成一个可选列表，并为每个列表分配一个 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!");
}

我的风格:

#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; }

我的html:

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

Answer 1

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

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

(或者只使用匿名函数)

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