jQuery UI 선택 가능 : 1 세대 자식에게만 바인딩

Question

선택할 수있는 요소 그룹이 있습니다.

jQuery UI Selectable이 올바른 도구 인 것처럼 보이지만 기능이 모든 하위 요소에 바인딩되어 모든 클래스가 적용되는 문제가 발생합니다.

이벤트의 클래스와 바인딩이 중첩 된 요소가 아닌 1 세대 자식에만 적용되도록하고 싶습니다. http://jsfiddle.net/ncKEW/

강령 HTML을

<div id="group"> 
    <div class="unit"> 
     <h2>Title</h2> 
     <div class="content"> 
      Dulce et decorum 
     </div> 
    </div> 
    <div class="unit"> 
     <h2>Title</h2> 
     <div class="content"> 
      Dulce et decorum 
     </div> 
    </div> 
    <div class="unit"> 
     <h2>Title</h2> 
     <div class="content"> 
      Dulce et decorum 
     </div> 
    </div> 
    <div class="unit"> 
     <h2>Title</h2> 
     <div class="content"> 
      Dulce et decorum 
     </div> 
    </div> </div> 

JS (단지 그림)

$(document).ready(function(){ 
    $('#group').selectable(); 
}); 

CSS는

을 :

는 여기에 내가 방지하기 위해 노력하고있어 설명 도움이 이는 jsFiddle입니다

#group{padding: 12px;} 
h2{font-size: 1.2em;margin: 2px 0;} 
.unit{background: blue;} 
.ui-selected{background: yellow;} 

Answer 1

filter 옵션을 사용하십시오.

$(document).ready(function(){ 
    $('#group').selectable({ 
     filter: " > div" 
    }); 
}); 

데모 : Fiddle