jQuery UI可选择的交互：可选元素中的元素

Question

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

我试着在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>

以下是更新的fiddle。