CODEWITHSUNDEEP
jquery-ui
CyclingFreak
CyclingFreak

Reputation: 1625

jQuery UI selectable interaction: elements in selectable element

I am using jQuery UI to make selections. I'm having an ul-list that I made selectable. The li-items contains icons and texts. It seems that the selectable comment not only makes the li-items selectable, but also the elements in the li-items. This gives some unexpected results.

I tried to make an example in jsFiddle: http://jsfiddle.net/eJSGU/ If you click several times on the edges of the icon, you will see that there is sometimes something selected that is bigger than the 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>

enter image description here

Anyone an idea how I can avoid this?

Upvotes: 3

Views: 1062

Answers (1)

Konstantin Dinev
Konstantin Dinev

Reputation: 34895

I suggest to use the filter option of the selectable. In your case you want only the li elements to be selectable so you set filter: $('selector').children()'.

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

Here is an updated fiddle.

Upvotes: 3

Related Questions