如何在 jQueryUI selectable 中捕获选择事件？

Question

我在网页上有几个链接。他们打开一个类似的对话框 window 并通过 $.load() 加载相同的内容。内容有 ul 列表，它使用 $.selectable() 插件：

$('.select-dialog-cities > ul').selectable({filter: 'li'});

我想处理 selectableselected 事件。由于我有三个链接，因此我需要将事件分开。没有全局标志可能吗？像这样：

$("#dialog_id .select-dialog-cities > ul").on("selectableselected", function(event, ui){});

Answer 1

要捕获该事件，您应该为初始化 selectable 的对象的 selected 属性提供一个函数。试试这个：

$('.select-dialog-cities > ul').selectable({
    filter: 'li',
    selected: function(e, ui) {
        console.log('You chose something!');
    }
});

您可以通过传递给函数的 ui 参数的 selected 属性获取有关引发事件的元素的信息。

更多信息在 jQueryUI Docs

Answer 2

根据您要实现的目标，您也可以只查询实际选择了哪些元素，如下所示：

$("#selectable").on("selectableselected", function(event, ui){
    $('.ui-selected').each(function(){
        console.log($(this).text());
    });
});

Example on JSFiddle

如果您在不同的对话框 windows 上执行此操作，您可能需要在每次创建新对话框时绑定到该事件 window。

Answer 3

如我伤心：

load equal content via $.load(). Content has ul list

我无法以这种方式分配事件：

$("#dialog_id .select-dialog-cities > ul").on("selectableselected", function(event, ui){});

因为我忘记了文档中的某一时刻 $.on():

Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on().

所以解决方案非常简单：

$("#dialog_id").on("selectableselected", ".select-dialog-cities > ul", function(event, ui){});

如何在 jQueryUI selectable 中捕获选择事件？

How to capture selection event in jQueryUI selectable?

javascript

jquery

jquery-ui

event-handling

jquery-events