jQuery UI 선택 가능한 상호 작용 : 선택 가능한 요소의 요소

Question

jQuery UI를 사용하여 선택합니다. 나는 내가 선택할 수있는 ul-list를 가지고있다. li 항목에는 아이콘과 텍스트가 들어 있습니다. 선택 가능한 주석은 li 항목을 선택 가능하게 할뿐만 아니라 li 항목의 요소도 선택할 수있게합니다. 이것은 예기치 않은 결과를 낳습니다.

jsFiddle에서 예제를 만들려고했습니다 : http://jsfiddle.net/eJSGU/ 아이콘 가장자리에서 여러 번 클릭하면 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> 

사람은 내가이 문제를 방지 할 수있는 방법 아이디어?

Answer 1

선택 가능한 필터 옵션을 사용하는 것이 좋습니다. 귀하의 경우 li 요소 만 선택할 수 있도록 filter: $('selector').children()'을 설정하십시오.

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

여기는 업데이트 된 fiddle입니다.