如何将函数添加到动态创建的Selectable(jqueryui)中
How to Add a function to a dynamically created Selectable(jqueryui)?
我试图动态地向可选择的jquery ui添加一个函数。我尝试动态生成可选列表,并为其分配了一个功能。当我点击列表时,myFUunction会弹出警报消息,但由于某种原因,它只适用于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>
我发现您的代码有几个问题。
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代码中是否存在这些类型的错误。
相关文章:
- 根据选项卡内部的文本链接中的哈希ID动态选择jqueryUI选项卡
- 如何在多个jQueryUI日期选择器中屏蔽特定日期
- jQueryUI Progress Bar
- 如何使用jqueryui进度条
- JqueryUI对话框没有'不能使用特定的输入名称
- JQueryUI选择菜单-如何添加更多选项
- jqueryui的轻量级替代品,可在angular项目中选择
- Jqueryui多选d&d安全壳
- 在jqueryui中更改关键字using
- 从数据库填充JQueryUI
- 如何使jqueryui小部件可拖动
- JQueryUI进度条没有't通过表单提交更新后保持价值
- jqueryui sortable完成排序后的事件
- 将额外的行附加到jqueryui自动完成(即使自动完成没有任何匹配项)
- JqueryUI 工具提示定位
- JQueryUI日期选择器,输入和日期选择器都打开了
- Jqueryui dialog(“close”) 结束当前的 JavaScript 线程
- JqueryUI,多个ID和else if 语句在可丢弃,我如何让它们工作
- 如何阻止元素堆叠?jqueryui.
- 如何将函数添加到动态创建的Selectable(jqueryui)中