I tried to add a function to the selectable jquery ui dynamically. I tried to generate the selectable list dynamically and assigned an function to it. The alert message from myFUnction should popped up when I clicked the list, but for some reason it only works in Firefox. The alert is not popping out in chrome or IE. Any idea why is it not working on chrome or IE?
cheers,
<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>
I see several problems with your code.
1: Where is $document declared? I think you meant
$( document )2: You should never declare variables in global-space from with-in your functions.
$content=$("<ol id='selectable'>");Declares $content in the global scope not inside the function as you probably meant to do.
var $content=$("<ol id='selectable'>");Note the keyword "var".
3: Don't use inline events in your HTML, bind the events via JavaScript http://api.jquery.com/on/
4: I'd advise you to use jslint or jshint to check your JS-code for these types of errors.