jQuery UI Selectable with user content inside list item

Question

I have ASP.NET MVC application that has list with jQuery Selectable list. My problem is that selecting items doesn't work very well if I have images (or other content) inside. I would like to have whole content to be selectable, not just the image. Does someone know how to accomplish that?

To get the idea I have attached an image where you can see that some of the items have an icon and others have been pushed to the right with div.

<ol id="productUnits">
<% foreach (ParameterTabViewModel.Unit unit in Model.UnitsViewModel.ProductVersionUnits)
{ %>
    <li class="ui-widget-content"><%= unit.IsUsed ? "<img style=\"float: left; width: 16px; height: 16px; margin-right: 4px; \" src=\"/Content/Images/special.png\"/>" : "<div style=\"float: left; width: 20px; height: 16px;\"></div>"%> <%= unit.Name %><%= Html.Hidden("ProductVersionUnits", unit.Id) %></li>
<% } %>
</ol>

Thanks

Answer 1

Solution

I had to add a filter like this $("#selectable").selectable({ filter: 'li' });