Question

I have this issue with jquery events binding for a select element. When I click on the select, the .focus class is supposed to be added. But selecting an option from the dropdown breaks the logic.

==> JSFIDDLE

Steps:

1. click on select
2. select an option
3. click on select –> .focus not added

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

The root of the problem is that you’re only adding the class when the select is focused, and then removing it when the select value changes. The reason why the class never gets added back is because the select never loses focus when you choose one of its options. Something like this should get you the behavior you’re after:

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

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

Edit – I’m guessing that you want to keep the functionality of removing the class when an option is selected, which is why I’d bind to click instead of focus and blur.