jquery bind focus / blur events to AJAX loaded content

Question

I have this script which works fine to add / remove a class on blur / focus on text inputs and textareas - however I need to bind it to also work on content added after page load via 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 : '');
   }
  });

 });

this is not binding the events to new content - any ideas?

Answer 1

Instead of using .bind, use .on():

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