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 并准备一个表单。表单正确解析两个字段(fieldNode.length 产生正确的数字)。它还会正确打印节点，直到我添加了 span 标记。为什么它不起作用？

Answer 1

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

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

并且源于 append() 返回附加了新元素的原始元素，不是新元素本身 (proof of concept)。

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

另外，紧接着的行会有问题，因为 jQuery 不会(或不能)使用对象创建元素，并追加(proof of failure) ，相反，您必须使用一串 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()
}));