jquery-ui - jQuery UI 可选交互 : elements in selectable element

Question

我正在使用 jQuery UI 进行选择。我有一个可以选择的 ul-list。 li-items 包含图标和文本。看来 selectable comment 不仅可以让 li-items 可选，还可以让 li-items 中的元素可选。这会产生一些意想不到的结果。

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

<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 .