Question

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

步骤：

点击选择
选择一个选项
点击选择 - ＆gt; .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永远不会失去焦点。这样的事情会让你得到你想要的行为：

$('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（）事件..

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

Jquery事件绑定以选择focusin / out

3 个答案: