如何在jQueryUI中捕获可选的选择事件

Question

我在网页上有几个链接。它们打开一个类似的对话框窗口，并通过$.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").on("selectableselected", function(event, ui){
    $('.ui-selected').each(function(){
        console.log($(this).text());
    });
});

JSFiddle示例

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

Answer 2

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

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

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

jQueryUI文档中的更多信息

Answer 3

正如我所悲伤的：

通过$.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){});