如何将函数添加到动态创建的Selectable(jqueryui)?
我试图动态地添加一个函数到可选的jquery ui。我试图动态生成可选列表并为其分配了一个函数。当我点击列表时,myFUnction的警报消息应该弹出,但由于某种原因,它只能在Firefox中使用。警报不会在Chrome或IE中弹出。任何想法为什么它不适用于Chrome或IE?如何将函数添加到动态创建的Selectable(jqueryui)?
欢呼声,
<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)
2:在-你的功能你不应该从宣布在全球空间变量。
$content=$("<ol id='selectable'>");
宣布在全球范围内$内容不是函数里面,你大概的意思做。
var $content=$("<ol id='selectable'>");
注意关键词 “变种”。
3:不要在你的HTML使用内联的事件,通过JavaScript http://api.jquery.com/on/
4绑定的事件:我建议你使用的JSLint或jshint检查您的JS代码,这些类型的错误。
并且你的DOCTYPE是哪里? 我不认为你可以用简写的形式编写DIV,为除了img,input和meta之类的标签之外的所有标签编写适当的结束标签 – mabs
如果我点击列表,myFunction仍然不会触发它仅在我评论$(“#selectable “).selectable(); –
什么意思不工作? –
'$ document.ready(function(){'应该是'$(document).ready(function(){'并且我猜$内容不应该是一个全局变量...... –
究竟是什么不工作?你看到控制台中有任何错误吗? – ElliotM