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

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

javascript jquery html

Javascript 如何触发jquery可选列表元素的函数,javascript,jquery,html,Javascript,Jquery,Html,我有一段代码，其中实现了一个可选按钮，就像jQueryUI（）的演示一样。每当选择一个项目（项目1、项目2等）时，我想触发一个函数。我做了几次尝试，但都没有成功。谁能帮我一下吗。我试过这个： $(".ui-selected ~ li").click(function() { alert("hello"); }); 还有这个 $("#selectable li").live('click',function() { alert("hello"); }); 我有这个，但有其他的名字。我想要的是

我有一段代码，其中实现了一个可选按钮，就像jQueryUI（）的演示一样。每当选择一个项目（项目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>


#反馈{字体大小：1.4em；}
#可选。用户界面选择{背景：#FECA40；}
#可选。ui已选择{背景：#F39814；颜色：白色；}
#可选{列表样式类型：无；边距：0；填充：0；宽度：60%；}
#可选li{边距：3px；填充：0.4em；字体大小：1.4em；高度：18px；}
$（函数（）{
$（“#可选”）.selective（）；
});
第1项
第2项
第3项
第4项
第5项
第6项
第7项

这需要在.ready封装中，当然：）

通过这种方式，您可以在选择（或取消选择）发生时运行函数：

根据文档，您需要将处理程序绑定到

selectableselected

事件。例如：

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

这把小提琴对我有用，你确定你在脑子里加了以下东西吗？您可以更改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" />

此方法有效，并且需要的代码更少。还有一个问题，为什么这个选择器不工作$（#可选li”）.on（“selectableselected”，function（event，ui）{…@Joel——可选插件应用于一组元素的父元素而不是其子元素，因此将事件侦听器附加到该元素而不是其子元素是有意义的。

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

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

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