jquery事件綁定選擇focusin/out

Question

我有這個問題與jQuery的事件綁定爲select元素。當我點擊選擇時，.focus類應該被添加。但是，從下拉菜單中選擇一個選項會打破邏輯。

==>JSFIDDLE

步驟：

1. 單擊選擇
2. 選擇一個選項
3. 單擊選擇 - 不添加>.focus

CODE：

<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

所以一個focusout上的選擇發生在這裏的一個選項。所以這顯然刪除的類）的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