如何在jQueryUI中捕获可选的选择事件
How to capture selection event in jQueryUI selectable?
我在网页上有几个链接。它们打开一个类似的对话框窗口,并通过$.load()
加载相同的内容。内容有ul
列表,使用$.selectable()
插件:
$('.select-dialog-cities > ul').selectable({filter: 'li'});
我想处理selectableselected
事件。由于我有三个链接,我需要将事件分开。没有全球旗帜可能吗?类似这样的东西:
$("#dialog_id .select-dialog-cities > ul").on("selectableselected", function(event, ui){});
根据您想要实现的目标,您还可以查询实际选择了哪些元素,如下所示:
$("#selectable").on("selectableselected", function(event, ui){
$('.ui-selected').each(function(){
console.log($(this).text());
});
});
JSFiddle示例
如果在不同的对话框窗口上执行此操作,则可能需要在每次创建新对话框窗口时绑定到事件。
要捕获该事件,您应该为初始化selectable
的对象的selected
属性提供一个函数。试试这个:
$('.select-dialog-cities > ul').selectable({
filter: 'li',
selected: function(e, ui) {
console.log('You chose something!');
}
});
您可以通过传递给函数的ui
参数的selected
属性来获取引发事件的元素的信息。
jQueryUI文档中的更多信息
正如我所悲伤的:
通过$.load()加载相等的内容。内容具有ul列表
我不能这样分配事件:
$("#dialog_id .select-dialog-cities > ul").on("selectableselected", function(event, ui){});
因为我忘记了文档$.on()
:中的一个瞬间
事件处理程序仅绑定到当前选定的元素他们必须在代码调用.on().时存在
因此,解决方案非常简单:
$("#dialog_id").on("selectableselected", ".select-dialog-cities > ul", function(event, ui){});
相关文章:
- 取消拖动&选择事件
- 选择同一文件时未触发HTML输入文件选择事件
- jQuery UI 选项卡取消选择事件或在选择时保存上一个选项卡
- 收听单选按钮取消选择事件而不知道按钮's上下文(骨干视图)
- 如何使用show hint插件在CodeMirror中订阅选择事件
- 为什么jQuery选择事件监听器会多次触发
- typeahead选择事件(jQuery)的动态绑定
- 在选择事件上引导日期时间选取器
- 从嵌套函数中选择事件目标
- 如何在 LI 上触发“选择”事件,由其 ID 标识
- 在动态创建的 DHTMLX 网格上附加行选择事件
- 如何在jquery中传递文件选择事件
- 如何检测单选按钮取消选择事件
- 从下拉菜单中选择事件 - 仅限 Javascript
- 无法检测加载时的选择/下拉列表选择事件
- 从下拉菜单中选择事件后的选项
- jQuery 选项取消选择事件
- 选择事件并将其应用于动态元素
- HTML 文件输入框不会触发文件选择事件并在更改事件 - angularJS 中警告
- jQuery - jquery 自动完成选择事件后的文本字段值更改