Jquery 事件绑定以选择焦点输入/输出

Question

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

==> JSFIDDLE

步骤：

1. 点击选择
2. 选择一个选项
3. 单击"选择 --> .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').click(function(){
   $(this).parent('a').toggleClass('focus'); 
});
$('select').blur(function() {
   $(this).parent('a').removeClass('focus'); 
});

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

Answer 2

这是因为选择该选项会从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事件。如果我正确理解了这个问题，这应该可以解决您的问题。

例