2013-12-11 1 views
-1

Я попытался добавить функцию к выбираемому jquery ui динамически. Я попытался сгенерировать выбранный список динамически и назначил ему функцию. Предупреждающее сообщение от myFUnction должно появиться, когда я щелкнул список, но по какой-то причине он работает только в Firefox. Предупреждение не появляется в Chrome или IE. Любая идея, почему это не работает на хром или 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

Какие средства не работают? –

+0

'$ document.ready (function() {' должно быть '$ (document) .ready (function() {' и i guess $ content не должно быть глобальной переменной ... –

+0

Что именно не работает? Вы видите какие-либо ошибки в консоли? – ElliotM

ответ

1

Я вижу несколько проблем с вашим кодом.

1: Где объявлен документ $? Я думаю, что вы имели в виду

$(document)

2: Вы никогда не должны объявлять переменные в глобальном пространстве от с-в ваших функциях.

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

Объявляет $ содержание в глобальном масштабе не внутри функции, как вы, вероятно, имел в виду сделать.

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

Обратите внимание на ключевое слово "вар".

3: Не использовать встроенные события в вашем HTML, связать события с помощью JavaScript http://api.jquery.com/on/

4: Я бы посоветовал вам использовать JSLint или jshint, чтобы проверить JS-код для этих типов ошибок.

+0

И где ваш DOCTYPE? Я не подумайте, что вы можете писать DIV в сокращенной форме, писать правильные концевые теги для всех тегов, кроме тегов, таких как img, input и meta. – mabs

+0

myFunction все еще не срабатывает, если я щелкнул список. Он отлично работал, только если я комментирую $ ("#selectable ") .selectable(); –