7

ぼかしのクラスを追加/削除/テキスト入力とテキストエリアにフォーカスするために正常に動作するこのスクリプトがあります-ただし、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 : '');
   }
  });

 });

これは、イベントを新しいコンテンツにバインドするものではありません - 何かアイデアはありますか?

4

2 に答える 2

10

を使用する代わりに、次を.bind使用します.on()。

$( document ).on( 'focus', 'input[type=text], textarea', function() {
    // stuff here will be applied to present and *future* elements
});
于 2011-01-26T23:40:48.057 に答える
1

.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 : '');
        }
    });
 });
于 2011-01-26T23:53:29.777 に答える