jquery - .focus() が .parent() でクラスを追加しない

Question

私は振ることができないように見える問題を抱えています。クリックするたびに強調表示するためにjQueryを使用しているテーブル行がいくつかあります。一部の行には単一の入力/ボタン/チェックボックス/テキストエリアがあるため、スパンで区切られておらず、親が 2 つしかない別の関数を使用しています。それらは正常に動作します。対応する「スパン入力」も同様です。一方、「スパンボタン」はアクティブなクラスを追加していません。奇妙なことに、デスクトップ ブラウザーで表示しているときにクリックし、別のアプリケーションのウィンドウをアクティブにするか、ブラウザーに新しいタブを追加してからクリックして戻すと、本来あるべき姿で強調表示されます。

何が起こっているのかわかりません。助けてください！本当にありがとう！

HTML:

<tr>
    <td class="input">
        <span>
            <label for="buttonA">ButtonA Label</label>
            <button name="buttonA" type="button"/>ButtonA</button>
        </span>
        <span>
            <label for="buttonB">ButtonB Label</label>
            <button name="buttonB" type="button"/>ButtonB</button>
        </span>
    </td>
    <td class="unit">
        Unit
    </td>
    <td class="info">
        Description or additional info</br>
        With multiple lines
    </td>
    <td class="action">
        <div id="delete" class="btn"><img src="delete_icon.png"></div>
        <div id="drag" class="btn"><img src="drag_icon.png"></div>
    </td>
</tr>

CSS:

.active {
    background: rgb(227,238,255) !important;
}

jQuery:

$("span input,span button").focus(function() {
    $(this).parent().parent().parent().addClass('active');
});