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()メソッドを使用する必要があります。イベントをDOMの最上部にバブルさせたくない場合は、.delegate()メソッドを使用することもできます。

さらに、.toggleClass()メソッドを使用すると、1つの関数呼び出しで要素のクラスを切り替えることができます。したがって、あなたのコードは次のようになります：

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