jquery bind focus/blur events to AJAX loaded content

Question

Tengo este script que funciona bien para agregar/eliminar una clase en blur/focus en entradas de texto y áreas de texto; sin embargo, necesito vincularlo para trabajar también en el contenido agregado después de la página carga a través de AJAX:

$(function() { 
    $('input[type=text], textarea').addClass("idleField"); // reset all ## 
    $('input[type=text], textarea').bind("focus", function(event){ 
     $(this).removeClass("idleField").addClass("focusField"); 
     if (this.value == this.defaultValue){ 
     this.value = ''; 
    } 
    if(this.value != this.defaultValue){ 
     this.select(); 
     } 
    }).bind("blur", function(event){ 
    $(this).removeClass("focusField").addClass("idleField"); 
     if ($.trim(this.value) == ''){ 
     this.value = (this.defaultValue ? this.defaultValue : ''); 
    } 
    }); 

}); 

esto no vincula los eventos con el nuevo contenido - ¿alguna idea?

Answer 1

En lugar de utilizar .bind, utilice .on():

$(document).on('focus', 'input[type=text], textarea', function() { 
    // stuff here will be applied to present and *future* elements 
}); 

Answer 2

El método .bind() es para elementos que existen actualmente. Para adjuntar manejadores de eventos a los elementos que existen actualmente en el DOM y cualquier elemento futuro que pueda existir, debe usar el método .live(). También puede usar el método .delegate() si no quiere que sus eventos se llenen de burbujas hasta la parte superior del DOM.

Además, puede utilizar el método .toggleClass() para cambiar las clases de sus elementos en una llamada a función. Por lo tanto, su código sería:

$(function() { 
    $('input[type=text], textarea').addClass("idleField"); // reset all ## 
    $('input[type=text], textarea').live("focus", function(event){ 
     $(this).toggleClass("focusField idleField"); 
     if (this.value == this.defaultValue) { 
      this.value = ''; 
     } 
     if (this.value != this.defaultValue) { 
      this.select(); 
     } 
    }).live("blur", function(event){ 
     $(this).toggleClass("focusField idleField"); 
      if ($.trim(this.value) == ''){ 
      this.value = (this.defaultValue ? this.defaultValue : ''); 
     } 
    }); 
});