 <p>You need to use a delegated handler as the input doesn't have class <code>input2</code> at the time the handler is applied.</p> <pre><code>$(document).on('focus','input.input1, textarea.input1', function() { $(this).addClass('input2').removeClass('input1'); }); $(document).on('blur','input.input2, textarea.input2', function() { $(this).addClass('input1').removeClass('input2'); }); </code></pre> <p>There are probably better ways to do this, however. I'd suggest using a third class to mark the inputs that need the class toggled, then just toggle the classes when the event occurs.</p> <pre><code>$('.needsToggle').on('focus blur', function() { $(this).toggleClass('input1 input2'); }); </code></pre> <p>If they always have class <code>input1</code> to start, you could use that instead of <code>needsToggle</code>.</p>