Jquery事件绑定以选择focusin/out

Question

jquery绑定到select元素时存在这个问题。当我单击select时，应该添加.focus类。但是从下拉列表中选择一个选项会破坏逻辑。

==> JSFIDDLE

步骤：

1. 单击select
2. 选择一个选项
3. 单击select -> .focus未添加

代码：

<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集中时添加类，然后在select值更改时删除该类。类从未被添加回的原因是当您选择它的一个选项时，select从未失去焦点。像这样的事情应该会让你有你想要的行为：

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

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

编辑--我猜您希望在选择选项时保留删除类的功能，这就是为什么我要绑定单击而不是焦点和模糊。

Answer 2

这是因为选择该选项将焦点从select元素中移除，就像从select中选择一个选项一样。

所以select上的一个focusout正在这里发生。因此，这显然删除了select父元素上的类。

另外，没有添加类，因为这里的select已经有了焦点。

因此，可以使用.blur()和.focus()事件。

检查演示

Answer 3

我相信你在找这样的东西，但我可能错了：

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

使用on绑定事件，并为您的复选框使用focus和blur事件。如果我正确理解了这个问题，这应该能解决你的问题。

示例