Question

我有一个代码，我实现了一个可选择的按钮，就像在jquery ui（http://jqueryui.com/selectable/）的演示中一样。我想在选择项目时触发一个功能（第1项，第2项等）。我做过几次尝试，但没有任何效果。有人能给我一个帮助。我试过这个：

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

也是这个

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

我有这个，但有其他命名。我想要的是在选择任何“可选择”项目时调用函数。

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

Answer 1

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

当然需要在.ready封装内部：）

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

Answer 2

这样，您可以在选择（或取消选择）发生时运行一个函数：

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

Answer 3

根据文档here，您需要将处理程序绑定到selectableselected事件。例如：

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

Answer 4

这个小提琴对我有用，你确定你在脑中添加以下内容吗？您可以更改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/

如何触发jquery可选列表元素的函数

4 个答案: