2013-07-07 2 views
0

У меня есть код, в котором я реализую кнопки выбора, как в демонстрации jQuery ui (http://jqueryui.com/selectable/). Я хочу вызвать функцию всякий раз, когда элемент выбран (пункт 1, пункт 2 и т. Д.). Я сделал несколько попыток, но ничего не работает. Может ли кто-нибудь помочь мне в этом. Я попытался это:Как вызвать функцию для элементов списка выбора jquery

$(".ui-selected ~ li").click(function() { 
alert("hello"); 
}); 

также это один

$("#selectable li").live('click',function() { 
alert("hello"); 
}); 

У меня есть именно это, но с другой наименовании. Я хочу, чтобы вызвать функцию, когда выбран какой-либо элемент «selectable».

<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> 
    $(function() { 
    $("#selectable").selectable(); 
    }); 
    </script> 
</head> 
<body> 

<ol id="selectable"> 
    <li class="ui-widget-content">Item 1</li> 
    <li class="ui-widget-content">Item 2</li> 
    <li class="ui-widget-content">Item 3</li> 
    <li class="ui-widget-content">Item 4</li> 
    <li class="ui-widget-content">Item 5</li> 
    <li class="ui-widget-content">Item 6</li> 
    <li class="ui-widget-content">Item 7</li> 
</ol> 

ответ

0

В соответствии с документацией here вам необходимо привязать обработчик к событию selectableselected. Например:

$("#selectable").on('selectableselected',function(event, ui) { 
    alert("hello"); 
}); 
+0

Этот метод работал, и он требует меньше кода. Еще один вопрос: почему этот селектор не работает? $ («# selectable li»). on («selectablesedlected», function (event, ui) {..... – Joel

+0

@Joel - выбираемый плагин применяется к родительскому элементу группы элементов, а не к его детям, поэтому имеет смысл, что вы присоединяете прослушиватель событий к этому элементу, а не к его дочерним элементам. –

0
$(document).on('click', '#selectable li', function(){ 
    alert($(this).text()); 
}); 

Это должно быть внутри .ready инкапсулирования конечно :)

$(function() { 
    // Right here 
}); 
0

Таким образом, вы можете запустить функцию, когда выберите (или отмените) происходит:

$(function() { 
    $("#selectable").selectable({ 
selected: function (event, ui) { 
     alert('!') 
    }, 
unselected: function (event, ui) { 
     //do stuff 
    } 
}); 
0

Эта скрипка работает для меня, вы уверены, что добавляете следующее в голову? Вы можете изменить css, но эти .js-файлы должны присутствовать.

<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" /> 

http://jsfiddle.net/RHUMv/

Смежные вопросы