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")可能在文档准备好之前运行，因此实际上不会正确找到该元素。我建议在inputField中分配TEX.init：

(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/

jQuery和对象文字函数不能一起工作

2 个答案: