0

我有一个代码，我在其中实现了一个可选按钮，就像在 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>
4

4 回答 4

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

这当然需要在 .ready 封装内:)

$(function() {
   // Right here
});
于 2013-07-07T20:58:56.927 回答
0

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

$(function () {
    $("#selectable").selectable({
selected: function (event, ui) {
         alert('!')
    },
unselected: function (event, ui) {
       //do stuff
    }
});
于 2013-07-07T21:01:36.163 回答
0

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

$("#selectable").on('selectableselected',function(event, ui) {
    alert("hello");
});
于 2013-07-07T21:03:33.407 回答
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/

于 2013-07-07T21:04:01.323 回答