如何将函数添加到动态创建的 Selectable(jqueryui)？答案

【问题标题】：How to Add a function to a dynamically created Selectable(jqueryui)?如何将函数添加到动态创建的 Selectable(jqueryui)？
【发布时间】：2013-12-11 16:47:17
【问题描述】：

我尝试将一个函数动态添加到可选择的 jquery ui。我试图动态生成可选列表并为其分配一个功能。当我单击列表时，应该会弹出来自 myFunction 的警报消息，但由于某种原因，它仅适用于 Firefox。警报未在 chrome 或 IE 中弹出。知道为什么它不能在 chrome 或 IE 上运行吗？

干杯，

<html>
<head>
<title>jQuery UI Selectable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<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; }
</style>
<script>
$document.ready(function() {
$("#myButton").button();
});
function generate(){   //generate a selectable list
$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()//simple alert msg
{
alert("Hello World!");
}
</script>
</head>
<body>
<div id='myList'/>
<div id='myText'/>
<button id="myButton" onClick="generate()">Generate List</button>
</body>
</html>

【问题讨论】：

不工作是什么意思？
$document.ready(function() { 应该是 $(document).ready(function() { 我猜 $content 不应该是一个全局变量...
究竟是什么不工作？您在控制台中看到任何错误吗？
当我单击列表时，来自 myFunction 的警报不起作用。它仅适用于 Firefox，但不适用于 google chrome 或 IE :(

标签： javascript jquery jquery-ui-selectable

【解决方案1】：

我发现您的代码存在一些问题。

1: $document 在哪里声明？我想你的意思是

$( document )

2：你不应该在你的函数中声明全局空间中的变量。

$content=$("<ol id='selectable'>");

在全局范围内声明 $content，而不是像您可能打算做的那样在函数内。

var $content=$("<ol id='selectable'>");

注意关键字“var”。

3：不要在 HTML 中使用内联事件，通过 JavaScript 绑定事件http://api.jquery.com/on/

4：我建议您使用 jslint 或 jshint 来检查您的 JS 代码中是否存在这些类型的错误。

【讨论】：

您的 DOCTYPE 在哪里？我不认为您可以以简写形式编写 DIV，为除 img、input 和 meta 等标签之外的所有标签编写适当的结束标签。
如果我单击列表，myFunction 仍未触发。只有当我评论 $( "#selectable" ).selectable();