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);

演示：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()
});

演示：http://jsfiddle.net/vBvZ8/8/