JQuery selectable에서 click 이벤트를 바인드 할 수 없습니다.

Question

이것은 매우 간단해야하지만 click 이벤트를 검색하고 JQuery UI에 대한 selectable 항목에서 함수를 실행하는 데 사용할 수 없습니다.

<div id="a"> 
<ol id="selectable-a"> 
    <li class="a-item">1</li> 
    <li class="a-item">2</li> 
    <li class="a-item">3</li> 
    <li class="a-item">4</li> 
</ol> 
</div> 

자바 스크립트 : 클릭 이벤트가 발생되지 않습니다

$("#selectable-a").selectable(); 

$("li .a-item").click(function() { 
    console.log("Executing command"); 
}); 

하지만.

저는 Google에 대해 살펴 보았습니다.

• 는 시도 .bind('click',으로 .click(을 대체 할 수 있지만 변경되지 않습니다 아무것도
• In the jquery forum가이 문제를 제기하고 누군가가 나를 (content.data('selectable') 작동하지 않습니다 내부 functionning을 조정하는 솔루션을 제공 상관없이 항상 정의되지 않는다 무엇)
• 거리를 1로 설정하면 사용자가 마우스를 1 픽셀 씩 움직여야 이벤트가 실행됩니다. 이는 잘못된 생각입니다.
• This SO question에는 만족할만한 대답이 없습니다. 즉, 선택한 항목에 대한 클릭 이벤트를 가져 오는 것이 아니라 모든 항목에 대한 클릭 이벤트를 얻고 싶습니다.

문제를 해결하는 방법에 대한 아이디어가 있습니까?

Answer 1

을 .a-item를 사용하지 않는 경우사용대신 $("li .a-item")

첫 번째 것은 a-item 클래스로 li을 찾습니다. 두 번째 요소는 a-item 클래스를 가진 요소를 list 요소 내부에서 찾습니다. 다음의 jQuery 셀렉터를 사용하는 경우

Answer 2

이 작동합니다 : 당신을 위해

<ol id="selectable-a"> 
    <li><div class="a-item">1</div></li> 
</ol> 

, 사용 :

$("li.a-item").click(function() { 
    console.log("Executing command"); 
}); 

또는 단지

$(".a-item").click(function() { 
    console.log("Executing command"); 
}); 

다른 곳

Answer 3

그것은 작동 :

$("#selectable-a li").click(function() { 
    console.log("Executing command"); 
}); 

이가 더 이상 목록 항목에 대한 별도의 클래스

예 필요하지 않은 추가 혜택 : http://jsfiddle.net/9brPn/1/

Answer 4

을

선택 가능 항목은 자동으로 helper div를 추가하여 .ui-selectable-helper 클래스의 올가미를 표시합니다. 이 헬퍼 div는 마우스 바로 아래에 위치합니다. 가장 좋은 추측은 mousedown에서 생성 된 다음 클릭을 방해한다는 것입니다.

나는 더 나은 문제 해결을 위해 노력하고 있어요,하지만 지금, 나는 이것을 사용하고 있습니다 :

.ui-selectable-helper{ 
    pointer-events:none; 
} 

는 또한 당신의 선택을 변경 $("li.a-item") 그리고 NOT $ ("리.http://api.jqueryui.com/selectable/#option-distance

에서 $("#selectable-a").selectable({distance:10});로 초기화에 옵션 거리를 추가하십시오 항목 ")

이

이

[편집] 더 나은 수정 [공간을 통지 코드에서 올바르지 않습니다]