jquery-ui - jQuery UI 可选交互：可选元素中的元素

Question

我正在使用 jQuery UI 进行选择。我有一个可选的 ul 列表。li-items 包含图标和文本。似乎可选择的注释不仅使 li-items 可选，而且使 li-items 中的元素可选。这会产生一些意想不到的结果。

我试图在 jsFiddle 中做一个例子：http: //jsfiddle.net/eJSGU/ 如果你在图标的边缘点击几次，你会看到有时选择的东西比 li 块大。

<li class="ui-widget-content">
    <div class="img"><img src="http://bib.arts.kuleuven.be/bibliotheek/images/icon_facebook.jpg"></div>  
    <div class="lbl">Item 1<div>
</li>

任何人都知道如何避免这种情况？

Answer 1

我建议使用可选的过滤器选项。在您的情况下，您只希望li元素是可选的，因此您设置filter: $('selector').children()'.

<script>
$(function() {
    $( "#selectable li" ).selectable({
        filter: $('#selectable').children('li')
    });
});
</script>

这是一个更新的小提琴。