0

要素のjqueryイベントバインディングにこの問題がありselectます。選択をクリックすると、.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');
});​
4

3 に答える 3

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.

于 2012-10-09T23:17:09.350 に答える
0

このようなものを探していると思いますが、間違っている可能性があります。

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

を使用onしてイベントをバインドし、focusおよびblurイベントを選択ボックスに使用します。質問を正しく理解していれば、これで問題は解決するはずです。

例

于 2012-10-09T23:11:59.223 に答える
0

これは、オプションを選択すると、要素からselectオプションを選択するのと同じように、要素からフォーカスが削除されるためです。select

したがって、focusoutここで選択が行われています..したがって、これは明らかに..の親要素のクラスを削除しselectます

selectまた、ここはすでにフォーカスされているため、クラスは追加されません。

したがって、代わりに .blur() および.focus() イベントを使用してください。

デモをチェック

于 2012-10-09T23:11:08.023 に答える