focusin/out 선택을위한 Jquery 이벤트 바인딩

Question

select 요소에 대한 jquery 이벤트 바인딩에이 문제가 있습니다. 선택을 클릭하면 .focus 클래스가 추가됩니다. 그러나 드롭 다운에서 옵션을 선택하면 논리가 깨집니다.

==>JSFIDDLE

단계 :

에

1. 클릭 옵션을 선택
선택에
2. 클릭 ->.focus가 추가되지

CODE :

옵션을 선택하면 당신이 여기에서 일어나고있는 선택에 따라서 select

focusout에서 옵션을 선택하는 것처럼 select 요소에서 포커스를 제거하기 때문에

<a> 
    <select> 
     <option>A</option> 
     <option>B</option> 
     <option>C</option> 
    </select> 
</a>​ 

$('select').focusin(function(){ 
    $(this).parent('a').addClass('focus'); 
}); 
$('select').bind('focusout change',function(){ 
    $(this).parent('a').removeClass('focus'); 
});​ 

Answer 1

문제의 뿌리는 경우에만 선택 값이 변경를 제거 후 선택에 초점이 맞춰지면 클래스를 추가하고있는 것입니다. 클래스가 다시 추가되지 않는 이유는 선택 항목 중 하나를 선택하면 선택 영역에 포커스가 없어지지 않기 때문입니다. 나는 '왜 내가 당신이 옵션을 선택하면 클래스를 제거하는 기능을 유지하려는 같은데요, -

$('select').click(function(){ 
    $(this).parent('a').toggleClass('focus'); 
}); 

$('select').blur(function() { 
    $(this).parent('a').removeClass('focus'); 
}); 

편집 :이 같은 뭔가가 당신 후에 당신이하고있는 행동을 얻어야한다 d는 포커스 및 흐림 대신 클릭하여 바인딩합니다.

Answer 2

.. 그래서 이것은 분명히에 클래스를 제거 select의 부모 요소 .. 여기 select가 이미 초점을 맞추고 있기 때문에 클래스가 추가되지 않습니다

..

그래서 대신에 사용 .blur() 차 .focus() 이벤트 ..

CHECK DEMO

Answer 3

난 당신이 이런 식으로 뭔가를 찾고 생각하지만, 내가 잘못 될 수있다 :

$('select').on("focus", function(){ 
    $(this).parent('a').addClass('focus'); 
}); 
$('select').on('blur',function(){ 
    $(this).parent('a').removeClass('focus'); 
});​ 

사용 on 이벤트 및 사용을 바인딩 선택 상자에 대한 focus 및 blur 이벤트 질문을 올바르게 이해하면 문제를 처리해야합니다.

EXAMPLE