Interacción seleccionable de jQuery UI: elementos en elemento seleccionable - jquery-ui

Estoy usando jQuery UI para hacer selecciones. Tengo una lista ul que seleccioné. Los elementos li contienen íconos y textos. Parece que el comentario seleccionable no solo hace que los elementos li sean seleccionables, sino también los elementos en los elementos li. resultados inesperados

Traté de hacer un ejemplo en jsFiddle: http://jsfiddle.net/eJSGU/ Si hace clic varias veces en los bordes del icono, verá que a veces hay algo seleccionado que es más grande que el bloque de li.

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

Alguien una idea de cómo puedo evitar esto?

Respuestas

Sugiero usar la opción de filtro de seleccionable. En tu caso solo quieres el li elementos que se pueden seleccionar para que establezca filter: $("selector").children()".

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

Aquí hay una actualización violín.