解释表单的对象附加到 DOM答案

【问题标题】：interpreting object for form append to DOM解释表单的对象附加到 DOM
【发布时间】：2013-05-15 15:04:56
【问题描述】：

我正在编写一个函数来将 json 对象转换为表单，并将其附加到 DOM。

我的语法似乎不正确； chrome 开发工具在第 15 行给了我一个“Uncaught SyntaxError: Unexpected identifier”错误。

我正在尝试支持单选、复选框和标准文本或文本框等表单案例。我不确定如何区分收音机和复选框。

这是我目前所拥有的：

jQuery.fn.toForm = function(obj) {

var target = this; 

var form = document.createElement("form");
    form.setAttribute('method', "post");
    form.setAttribute('action', "submit.php");

$.each(obj, function(key, value){

    var inputCheckbox = $("<input type='checkbox' value='"+value+"' />");
    var inputStandard = $("<input type='text' value='"+value+"' />");

    if(typeOf value === 'boolean'){

        inputCheckbox.attr("id", key).attr("name", key).appendTo("form");
        form.append(inputCheckbox);
    }
    else {
        inputStandard.attr("id", key).attr("name", key).appendTo("form");
    }   

    target.append(form); 
});
};

有什么建议吗？

【问题讨论】：

typeOf 应该是 typeof（小写 o），我认为您的 JSON 字符串中有错误，但您没有发布。
form.append 不存在，不应该是 form.appendChild 吗？

标签： javascript jquery json forms api

【解决方案1】：

问题似乎出在一行

inputCheckbox.attr("id", key).attr("name", key).appendTo("form");

JQuery 在附加到尚未在 dom 中的元素时可能不可靠（我相信这尤其适用于 JQuery 1.9+ - 请参阅 http://bugs.jqueryui.com/ticket/8858（最后一条评论）以确认该错误）。

如果你移动了

target.append(form);

到 if 语句上方，您可能会发现这可以解决您的问题

【讨论】：