如何在列表上使用 onclick 事件（jqueryui-selectable）？答案

【问题标题】：How to use onclick event on a list (jqueryui-selectable)?如何在列表上使用 onclick 事件（jqueryui-selectable）？
【发布时间】：2013-12-12 17:05:48
【问题描述】：

我创建了一个带有 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!");
}

我的风格：

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

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-selectable

【解决方案1】：

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

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

（或者只是使用匿名函数）

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

【讨论】：

【解决方案2】：

您应该使用selecting 事件。在此处查看示例 http://jsfiddle.net/Pa4NK/

【讨论】：

我还有一个问题。实际上，我想将变量“a”值从列表生成传递给 myFunction。例如 myFunction 看起来像这样： function myFunction(msgNo) { alert(msgNo); } 有可能做到吗？
这是正确的选择。例如，您有选择和取消选择事件 (api.jqueryui.com/selectable)

【解决方案3】：

selectable 添加了一个辅助 div 来显示套索。但是助手 div 位于鼠标下方，这可以防止点击击中底层元素。即使助手的宽度和高度设置为 0，这似乎也会导致问题。

更改距离选项将解决问题 http://api.jqueryui.com/selectable/#option-distance

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

&然后实现selectable()函数的作用

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

【讨论】：