Question

I have an input field to which I add a class when it gets the focus. If it loses the focus, the class should be removed and another class added.

<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;       
}

Adding the class works fine, but not the blur function. What is the problem?

Answer 1

try…

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

when the $(document).ready is fired, there is no element with both classes..