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

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

我试着用JSFIDLE做一个例子： 如果在图标的边缘上单击几次，您将看到有时选择的某些对象比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>

项目1

---

有人知道我如何避免这种情况吗？

我建议使用可选的过滤器选项。在您的例子中，您只希望

li

元素是可选择的，因此可以设置

过滤器：$（'selector'）.children（）'

$（函数（）{
$（“#可选li”）。可选({
筛选器：$（'#可选'）。子项（'li'））
});
});

这里是一个更新的

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