动态生成的 html 表单不允许 jQuery bind("submit") 方法

Question

我有以下动态生成的表单，其中一些复选框具有隐藏的输入字段，当用户选中该特定复选框时会显示这些输入字段。我在这里需要一些要求：

保存表格前至少选中一个复选框
检查隐藏的input是否显示出来，不能为空
如果用户使用 "+"+" 图标单击添加新输入框，则新添加的输入字段也必须填写

如果满足上述所有要求，则用户可以提交表单。

   <form method="post" action="fakeUrl" id="objectionsFrm" class="objFrm">
   <input type="hidden" name="ins_sno" id="ins_sno" value="<?php echo($ins_sno); ?>">
   <strong>Title:</strong> <strong class="text-danger">
    <table class="table table-responsive obj_tbl">
    <tbody>
        <?php $counter = 0; foreach($db->getRecordSet($sql) as $obj){ $counter +=1;?>
        <?php if(isset($obj["do_blanks"]) && !empty($obj["do_blanks"])){ $input_hide_show = 1; }else{$input_hide_show = 0;}?>
            <tr>
                <td><input type="checkbox" onchange="inputBoxShow('<?php echo($input_hide_show);?>','<?php echo(intval($obj['sno']));?>');" name="chk<?php echo($obj["sno"]);?>" id="chk<?php echo($obj["sno"]);?>" value="<?php echo($obj['sno']); ?>"></td>
                <td> <label for="chk<?php echo($obj["sno"]);?>"><?php echo($obj['lbl_title']); ?></label>
                 <?php if(null != intval($obj["do_blanks"]) && intval($obj["do_blanks"]) == 1){?>
                        <input type="text" required placeholder="Type objection details here..." id="blanks_<?php echo($obj["sno"]);?>" name="blanks_<?php echo($obj["sno"]);?>" class="form-control obj-input">
                 <?php } ?>
                 </td>
            </tr>
            <?php }//foreach()  ?>
        </tbody>
    </table>
       <div><i onclick="add_new_obj();" class="fa fa-plus-circle text-success" style="font-size:16px;cursor:pointer;padding-left:3px;"></i></div>
       <div>Return Date</div>
       <div>
            <input type="text" name="return_date" readonly id="return_date" value="<?php echo(date('Y-m-d',strtotime("+10 days"))); ?>" class="form-control">
       </div>
       <div><input type="submit" name="btnSave" id="btnSave" value="Return With Objection(s)" class="btn btn-danger"></div>
       <span id="rst"></span>          
</form>

我在本页底部有以下 jQuery 代码，用于添加上述表单的提交事件：

<script type="text/javascript">
    $(document).ready(function(){
        $("form#objectionsFrm").on("submit",function(ev){
            ev.preventDefault();
                $.ajax({
                    url: 'ajaxPhp/saveObjectionsToCase.php',
                    data: new FormData($('form#objectionsFrm')[0]),
                    type:"POST",
                    cache: false,
                    dataType: 'json',
                    success: function(t){
                            if(t['flag'] == 1){
                                    alert('done');
                                   }
                            else{
                                alert('not done');                                                               
                                }
                            },
                    error: function(xhr){
                        $("#rst").html('Error: - '+xhr.status+'</strong>');
                        }
                    });
        })
    })
   </script>

表单甚至不允许绑定提交事件。

Answer 1

我不是 JS 专家，但我相信 on ready 事件仅在加载标记时起作用，不应执行您的任何 Javascript 代码。 on load 事件可能适用于某些情况。

不过，更好的方法是像评论中建议的那样使用事件委托。你使用它的方式是这样的，你选择一个共同的祖先，你的元素是嵌套的（body 几乎每次都有效）并且在事件类型之后（例如 submit）你的元素的选择器如下.

    $("body").on("submit", "form#objectionsFrm",function(ev){
        ev.preventDefault();
            $.ajax({
                url: 'ajaxPhp/saveObjectionsToCase.php',
                data: new FormData($('form#objectionsFrm')[0]),
                type:"POST",
                cache: false,
                dataType: 'json',
                success: function(t){
                        if(t['flag'] == 1){
                                alert('done');
                               }
                        else{
                            alert('not done');                                                               
                            }
                        },
                error: function(xhr){
                    $("#rst").html('Error: - '+xhr.status+'</strong>');
                    }
                });
    })

动态生成的 html 表单不允许 jQuery bind("submit") 方法

Dynamically generated html form don't allow jQuery bind("submit") method

html

jquery

dynamicform