动态生成的html表单不允许jQuery bind“ submit”方法

问题描述

我具有以下动态生成的形式，其中某些复选框具有隐藏的输入字段，这些字段在用户选中特定复选框时显示。 我在这里只需要几个要求：

1. 要在保存表单之前至少选中一个复选框
2. 要检查隐藏的输入是否已显示，则不应为空
3. 如果用户使用“ +” 图标单击添加新输入框，则还必须填写新添加的输入字段

如果满足以上所有条件，则用户可以提交表格。

   <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代码，以上述形式添加Submit事件：

<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>

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

解决方法

我不是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>');
                    }
                });
    })