jquery привязывает события фокуса / размытия к загруженному AJAX-контенту

Question

У меня есть этот скрипт, который прекрасно работает для добавления / удаления класса размытия / фокусировки на ввод текста и текстовых областей - однако мне нужно связать его, чтобы он также работал с контентом, добавленным после загрузки страницы через 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 : '');
   }
  });

 });

это не привязывает события к новому контенту - есть идеи?

Answer 1

Вместо использования .bind используйте .on():

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

Answer 2

Метод .bind () предназначен для элементов, которые существуют в настоящее время. Чтобы присоединить обработчики событий к элементам, которые в настоящее время существуют в DOM и , к любым будущим элементам, которые могут существовать, вы должны использовать метод .live () . Вы также можете использовать метод .delegate () , если вы не хотите, чтобы ваши события пузырились до самого верха DOM.

Кроме того, вы можете использовать метод .toggleClass () для переключения классов ваших элементов за один вызов функции. Таким образом, ваш код будет:

$(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 : '');
        }
    });
 });