Question

I’m trying to change the class of an input element when it loses focus. The whole premise of this project is to allow the user to double-click some text and then be able to edit that text. Then when they lose focus on the field, it should look like it’s not part of a form.

my problem lies here:

$('.actdblclk').dblclick(function(){

    $(this).removeClass('actdblclk').addClass('actdblclk_active').focus();

});

$('.actdblclk_active').focusout(function(){
    alert();

    $(this).removeClass('actdblclk_active').addClass('actdblclk');
});

I gain focus on the input field when I double click, but when I click off, the focusout event does not fire.

Here is the whole fiddle http://www.jsfiddle.net/t8JsG/

Answer 1

The focusout() event handler doesn’t fire, because at the moment it was assigned there was no element with a class .actdblclk_active.

You should assign a focusout() handler inside dblclick(), like this:

$('.actdblclk').dblclick(function(){
  $(this).removeClass('actdblclk').addClass('actdblclk_active').focus();
  $(this).focusout(function(){
    alert();

    $(this).removeClass('actdblclk_active').addClass('actdblclk').unbind('focusout');

  }) 
});

Update: Second option is to assign focusout() handler using jQuery.live(), like this:

$('.actdblclk_active').live('focusout', function(
  alert();
  $(this).removeClass('actdblclk_active').addClass('actdblclk');)
});

This way this handler will be assigned to current and any future elements that match .actdblclk_active selector