1

フォーカスを取得したときにクラスを追加する入力フィールドがあります。フォーカスが失われた場合は、クラスを削除して別のクラスを追加する必要があります。

<input type="text" class="input" />

$(document).ready(function () {

        $(".input").focus(function () {
            $(this).addClass("focus");
        });

        $(".input.focus").blur(function () {
            $(this).removeClass("focus").addClass("error");
        });
});

.input.error
{           
    border: 2px solid Red;         
}

.input.focus
{           
    border: 2px solid Yellow;       
}

クラスの追加は正常に機能しますが、blur関数は機能しません。何が問題ですか？

4

3 に答える 3

2

ハンドラーをバインドするblurと、セレクター ( $(".input.focus")) は要素を返しません。

現在および将来の要素に対して機能する動的ハンドラーをバインドする必要があります。

$('body').on('blur', '.input.focus', function () {
  $(this).removeClass("focus").addClass("error");
});

速度を向上bodyさせるには、これらの要素の親コンテナーに置き換えます。

これはフォーカスとぼかしには少しやり過ぎですが。次のようなことを試すことができます：

$('.input').on('focus', function() {
  $(this).removeClass('error').addClass('focus');
}).on('blur', function() {
  $(this).removeClass('focus').addClass('error');
});
于 2012-07-18T16:35:03.993 に答える
1

試す...

$(".input").focus(..).blur(..);

$(document).ready が起動されると、両方のクラスを持つ要素はありません..

于 2012-07-18T16:34:03.280 に答える
1

問題は、blur イベントをまだ存在しない要素にバインドしていることです。

これを行う$(document).readyと、ドキュメントが最初に読み込まれたときに実行されるため、要素を見つけますが、.input.focusそのクラスの要素はまだありません。

要素が作成された後、または jQuery live を使用して、このコードを追加する必要があります

jQuery ライブで使用するには、コードを次のように変更します。JsFiddle のデモはこちら: http://jsfiddle.net/RDEXg/

<input type="text" class="input" />

$(document).ready(function () {

        $(".input").focus(function () {
            $(this).addClass("focus");
        });

        $(".input.focus").live('blur',function () {
            $(this).removeClass("focus").addClass("error");
        });
});

.input.error
{           
    border: 2px solid Red;         
}

.input.focus
{           
    border: 2px solid Yellow;       
}

ドキュメントの準備ができたときにこのイベント リスナーを追加しているため、 .live ('blur',... オプションが必要です。.input.focus は、ドキュメントの準備ができているときに存在しません。/住む/

于 2012-07-18T16:34:16.697 に答える