通过编程动态创建FORM表单后 .submit提交事件无法触发问题

• 你采用分段append拼接表单DOM的写法存在逻辑错误：jQuery调用append()插入不完整的<form>起始标签时，浏览器会自动补全闭合该标签，后续追加的所有表单字段、提交按钮都会被渲染在form标签外部，点击submit按钮自然无法触发#revForm的提交事件
• 原有代码拼接input属性时，id和name之间没有空格，属于语法瑕疵，可能导致部分浏览器解析属性异常

推荐先拼接完整的表单HTML字符串，再一次性插入容器，避免DOM分段渲染的问题，修正后代码如下：

$(function () {
    
    var form_str="";
    var fields=<?php echo json_encode($fields); ?>;
    var cfields=<?php echo json_encode($capFields); ?>;
    var qdata=<?php echo json_encode($qdata); ?>;


    $("#returnvalbox").show();

    // 先拼接form起始标签
    form_str += "<form id='revForm' name='revForm' method='post' action='#'>";

    var i=0;

    Object.keys(qdata).forEach(key => {  // create the form body
        // 修复属性间无空格的问题
        if (key=="id") {   // you can't edit the id
            form_str += "<label for='"+key+"'>"+cfields[i++]+" </label>";
            form_str += "<input  type='text' class='body' ";
            form_str += "id='"+key+"' name='"+key+"' value='"+qdata[key]+"' readonly  ><br>";  
        }else {
            form_str += "<label for='"+key+"'>"+cfields[i++]+" </label>";
            form_str += "<input  type='text' class='hov body' ";
            form_str += "id='"+key+"' name='"+key+"' value='"+qdata[key]+"'><br>"; 
        } 
    }); //Object.keys
    
    // 拼接按钮部分
    form_str += "<br><input  type='submit' class='cbut hov' value='Update'>"
                    + "&nbsp;&nbsp;<button type='button' class='cbut hov' id='bak'>Go Back</button><p></p>";
    // 拼接form闭合标签
    form_str += "</form>";

    // 一次性把完整表单插入容器
    $(".formcontainer").append(form_str);
                
    $("#revForm").submit(function(event) {  
        event.preventDefault();
        alert("submitted Line 142");
    }) // submit 
            
}) // ready

内容的提问来源于stack exchange，提问作者user5507839