jQuery與AJAX的現場標籤

Question

我有jQuery的現場標籤插件的問題。現在，它在我的網頁上完全運行。這是一個非常棒的插件，做得非常好。

但我需要破解有點擴展功能：

我需要它與AJAX表單數據的工作。換句話說，我試圖通過AJAX填充我的表單。插件在動態填充字段時無法正常工作，插件甚至不會注意到輸入值。因此，標籤不會像標籤一樣淡出標籤，因此我基本上都有標籤和字段值相互重疊。

你有什麼想法我可以去黑客這個插件來使用AJAX值嗎？

/* 
* In-Field Label jQuery Plugin 
* http://fuelyourcoding.com/scripts/infield.html 
* 
* Copyright (c) 2009 Doug Neiner 
* Dual licensed under the MIT and GPL licenses. 
* Uses the same license as jQuery, see: 
* http://docs.jquery.com/License 
* 
* @version 0.1 
*/ 
(function($){ 

    $.InFieldLabels = function(label,field, options){ 
     // To avoid scope issues, use 'base' instead of 'this' 
     // to reference this class from internal events and functions. 
     var base = this; 

     // Access to jQuery and DOM versions of each element 
     base.$label = $(label); 
     base.label = label; 

     base.$field = $(field); 
     base.field = field; 

     base.$label.data("InFieldLabels", base); 
     base.showing = true; 

     base.init = function(){ 
      // Merge supplied options with default options 
      base.options = $.extend({},$.InFieldLabels.defaultOptions, options); 

      // Check if the field is already filled in 
      if(base.$field.val() != ""){ 
       base.$label.hide(); 
       base.showing = false; 
      }; 

      base.$field.focus(function(){ 
       base.fadeOnFocus(); 
      }).blur(function(){ 
       base.checkForEmpty(true); 
      }).bind('keydown.infieldlabel',function(e){ 
       // Use of a namespace (.infieldlabel) allows us to 
       // unbind just this method later 
       base.hideOnChange(e); 
      }).change(function(e){ 
       base.checkForEmpty(); 
      }).bind('onPropertyChange', function(){ 
       base.checkForEmpty(); 
      }); 
     }; 

     // If the label is currently showing 
     // then fade it down to the amount 
     // specified in the settings 
     base.fadeOnFocus = function(){ 
      if(base.showing){ 
       base.setOpacity(base.options.fadeOpacity); 
      }; 
     }; 

     base.setOpacity = function(opacity){ 
      base.$label.stop().animate({ opacity: opacity }, base.options.fadeDuration); 
      base.showing = (opacity > 0.0); 
     }; 

     // Checks for empty as a fail safe 
     // set blur to true when passing from 
     // the blur event 
     base.checkForEmpty = function(blur){ 
      if(base.$field.val() == ""){ 
       base.prepForShow(); 
       base.setOpacity(blur ? 1.0 : base.options.fadeOpacity); 
      } else { 
       base.setOpacity(0.0); 
      }; 
     }; 

     base.prepForShow = function(e){ 
      if(!base.showing) { 
       // Prepare for a animate in... 
       base.$label.css({opacity: 0.0}).show(); 

       // Reattach the keydown event 
       base.$field.bind('keydown.infieldlabel',function(e){ 
        base.hideOnChange(e); 
       }); 
      }; 
     }; 

     base.hideOnChange = function(e){ 
      if(
       (e.keyCode == 16) || // Skip Shift 
       (e.keyCode == 9) // Skip Tab 
      ) return; 

      if(base.showing){ 
       base.$label.hide(); 
       base.showing = false; 
      }; 

      // Remove keydown event to save on CPU processing 
      base.$field.unbind('keydown.infieldlabel'); 
     }; 

     // Run the initialization method 
     base.init(); 
    }; 

    $.InFieldLabels.defaultOptions = { 
     fadeOpacity: 0.5, // Once a field has focus, how transparent should the label be 
     fadeDuration: 300 // How long should it take to animate from 1.0 opacity to the fadeOpacity 
    }; 


    $.fn.inFieldLabels = function(options){ 
     return this.each(function(){ 
      // Find input or textarea based on for= attribute 
      // The for attribute on the label must contain the ID 
      // of the input or textarea element 
      var for_attr = $(this).attr('for'); 
      if(!for_attr) return; // Nothing to attach, since the for field wasn't used 


      // Find the referenced input or textarea element 
      var $field = $(
       "input#" + for_attr + "[type='text']," + 
       "input#" + for_attr + "[type='password']," + 
       "textarea#" + for_attr 
       ); 

      if($field.length == 0) return; // Again, nothing to attach 

      // Only create object for input[text], input[password], or textarea 
      (new $.InFieldLabels(this, $field[0], options)); 
     }); 
    }; 

})(jQuery); 

Answer 1

base.init = function(){ 
     // Merge supplied options with default options 
     base.options = $.extend({},$.InFieldLabels.defaultOptions, options); 

     // Check if the field is already filled in 
     if(base.$field.val() != ""){ 
      //base.$label.hide(); 
      base.setOpacity(0.0); 
      base.showing = false; 
     } 
     else //Added by Anand 
     { 
      base.setOpacity(blur ? 1.0 : base.options.fadeOpacity); 
      base.showing = true; 
     }; 

     base.$field.focus(function(){ 
      base.fadeOnFocus(); 
     }).blur(function(){ 
      base.checkForEmpty(true); 
     }).bind('keydown.infieldlabel',function(e){ 
      // Use of a namespace (.infieldlabel) allows us to 
      // unbind just this method later 
      base.hideOnChange(e); 
     }).change(function(e){ 
      base.checkForEmpty(); 
     }).bind('onPropertyChange', function(){ 
      base.checkForEmpty(); 
     }).bind('keyup',function(e){ //Added by Anand 
      base.checkForEmpty(); 
     }); 
    }; 

改變你的初始化函數像上面。在這裏，我添加了其他部分來檢查空值。然後，無論何時填充或清除文本字段中的值，只需再次調用內場標籤創建函數，如「$（」label「）。inFieldLabels（）;」