javascript - 附加跨度不起作用

Question

 form=jQuery("<form>"
            ,{
                "method":"post"
                ,
                "action":node.get("inline-edit-target")

            }
            );


        $(node).after(form);
        //console.log($(node).html());

        fieldNode=$(node).find(".inline-edit-field");
        console.log(fieldNode.length);
        fieldNode.each(function(index,elem)
        {
            console.log($(elem).data("field-name"));

            $(form).append("<span>").html($(elem).data("field-name"));
            $(form).append("<input>"
                ,{
                    "type":"text"
                    ,
                    "name":$(elem).data("field-name")
                    ,
                    "value":$(elem).text()
                });       
        }
        );

它基本上检查DOM并准备表格。form 正确解析两个字段（fieldNode.length 产生正确的数字）。span在我添加标签之前，它还会正确打印节点。为什么它不工作？

Answer 1

问题，如果它是唯一的问题，是这一行：

$(form).append("<span>").html($(elem).data("field-name"));

并且源于append()返回添加新元素的原始元素的事实，而不是新元素本身（概念证明）。

因此，您要附加 aspan然后立即将父 div 的 HTML 覆盖到$(elem).data('field-name')返回的任何内容。

此外，紧随其后的行会有问题，因为 jQuery 不会（或不能）使用带有附加（失败证明）的对象创建元素，而是必须使用 html 字符串，例如，在您的情况下：

$(form).append('<input type="text" name="' + $(elem).data('field-name') + '" value="' + $(elem).text() + '" />');

或者（这可能更容易）：

$(form).append($("<input />" ,{
    "type" : "text",
    "name" : $(elem).data("field-name"),
    "value" : $(elem).text()
}));