使用jquery创建元素时出错

时间:2014-05-28 06:44:58

标签: javascript jquery html

这是发生的错误:

Uncaught TypeError: Cannot read property 'replace' of undefined jquery.min.js:2
m.extend.camelCase jquery.min.js:2
m.extend.css jquery.min.js:3
(anonymous function) jquery.min.js:3
m.access jquery.min.js:3
m.fn.extend.css jquery.min.js:3
(anonymous function) tryingAgainTable.html:69
(anonymous function) tryingAgainTable.html:43
foreach tryingAgainTable.html:29
reduce tryingAgainTable.html:42
makeData.data tryingAgainTable.html:68
(anonymous function)

我使用像这样的jquery创建一个元素:

 makeData["data"]({
"name": "Taxi Driver",
"style": {
    "width": "71%"
},
"children": [
    {
        "el": "input",
        "attributes": {
            "name": "taxi_driver",
            "id": "taxi_driver",
            "type": "file"
        },
        "style": {
            "border": "solid 1px red"
        }
    },
    {
        "el": "img",
        "attributes": {
            "id": "TaxiDriver",
            "src": "#",
            "alt": "your image"
        }
    }
]
});

该功能在此处定义:

var foreach=function(arr,fn)
    {
        for(var i=0;i<arr.length;i++)
        {
            fn(arr[i]);
        }   
    };

 var reduce=function(arr,base,fn)
    {
        foreach(arr,function(elem){
            base=fn(base,elem);
        });
        return base;
    }

 makeData["data"]=function(obj)
    {
        var td=$('<td></td>').css(obj["style"]);
        var td_out=reduce(obj.children,td,function(base,elem){
            var element=$('<'+elem["el"]+'>').attr(elem["attributes"]).css(elem["style"]).appendTo(base);
        });
        console.log(td_out.get(0));
        console.log(td_out.html());
        return td_out;
    }

jquery来源的错误位于第346行:

// Convert dashed to camelCase; used by the css and data modules
// Microsoft forgot to hump their vendor prefix (#9572)
camelCase: function( string ) {
    return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
}

1 个答案:

答案 0 :(得分:1)

在你的数据中你有一个不一致的地方:对于你有风格的第一个孩子而你没有。

我认为你的错误来自.css电话的这一行。

var element=$('<'+elem["el"]+'>').attr(elem["attributes"]).css(elem["style"]).appendTo(base);

在这个jsbin中.css(undefined)看看会发生什么:http://jsbin.com/kuwoc/1/edit

所以你可以尝试重塑你的make ['data']函数添加未定义的检查:

makeData["data"]=function(obj){
    var td=$('<td></td>').css(obj["style"]);
    var td_out=reduce(obj.children,td,function(base,elem){
        var element=$('<'+elem["el"]+'>');
        if(elem["attributes"]){
          element.attr(elem["attributes"]);
        }
        if (elem["style"]){
          element.css(elem["style"]);
        }
        element.appendTo(base);
    });
    console.log(td_out.get(0));
    console.log(td_out.html());
    return td_out;
};

PS:作为建议,也考虑点符号,而不是makeData['data']使用makeData.data