如何解决动态生成的html表单不允许jQuery bind“ submit”方法
我具有以下动态生成的形式,其中某些复选框具有隐藏的输入字段,这些字段在用户选中特定复选框时显示。 我在这里只需要几个要求:
如果满足以上所有条件,则用户可以提交表格。
<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>');
}
});
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。