jQuery和對象常量功能工作不在一起

Question

我試圖整理我的jQuery代碼，所以我創建了一個對象文本，但現在focusTextArea不工作，我的textarea的值沒有更新。

感謝您的幫助。

HTML

<textarea id="test"></textarea>​ 

---

的JavaScript

(function($,window,document,undefined){ 

    var TEX = { 

     inputField: $("textarea#test"), 

     /* Init all functions */ 
     init: function() 
     { 
      this.focusTextArea(); 
     }, 

     /* Function update textarea */ 
     focusTextArea: function() 
     { 
      this.inputField.text('test'); 
     }, 
    } 

    $(document).ready(function(){ 
     TEX.init(); 
    }); 

})(jQuery,window,document);​ 

---

的jsfiddle http://jsfiddle.net/vBvZ8/1/

Answer 1

首先，你沒有正確包含jQuery在小提琴中。另外，我想認爲您的意思是將代碼放在文檔的head（由於document.ready處理程序）。

更重要的是也許選擇器$("textarea#test")在之前運行該文檔已準備就緒，因此實際上不會正確地找到該元素。我會建議在TEX.init分配inputField：

(function($,window,document,undefined){ 

    var TEX = { 

     /* Init all functions */ 
     init: function() 
     { 
      this.inputField = $("#test"); 
      this.focusTextArea(); 
     }, 

     /* Function update textarea */ 
     focusTextArea: function() 
     { 
      this.inputField.text('test'); 
     }, 
    } 

    $(document).ready(function(){ 
     TEX.init(); 
    }); 

})(jQuery,window,document);​ 

更新例如：http://jsfiddle.net/xntA2/1/

作爲一個側面說明，textarea#test應改爲只#test。 textarea位是多餘的，因爲頁面上只有一個元素，id=test。

Answer 2

替代語法，以避免在尋找它的存在之前的元素是從一個函數返回的元素：

(function($,window,document,undefined){ 

    var TEX = { 
     /* function won't look for element until called*/ 
     inputField:function(){ 
      return $("textarea#test") 
     }, 
     init: function() 
     { 
      this.focusTextArea(); 
     }, 
     focusTextArea: function() 
     { 
      this.inputField().text('test'); 
     }, 
    } 

    $(document).ready(function(){ 
     TEX.init(); 
    }); 

})(jQuery,window,document); 

DEMO：http://jsfiddle.net/vBvZ8/5/

我意識到這是一個簡單的例子...但你也非常接近創建一個jQuery插件，這也可能是有益的。以下提供相同的功能例如：

(function($, window, document, undefined) {  
    $.fn.focusTextArea = function() { 
     return this.each(function(){ 
      $(this).text('test'); 
     })   
    };  
})(jQuery, window, document); 

$(function() { 
    $('textarea').focusTextArea() 
}); 

DEMO：http://jsfiddle.net/vBvZ8/8/