使用 jquery.validate 插件对动态新增的表单进行校验

目前提交表单的时候只会对第一行表单能生效，新增的表单无法校验

如何对动态生成的表单进行同步校验？

<script src="{% static 'js/jquery-2.1.1.js' %}"></script> <script src="{% static 'js/bootstrap.js' }"></script> <script src="{% static 'js/jquery.validate.js' %}"></script> <script src="{% static 'js/messages_zh.min.js' %}"></script> <script type="text/Javascript" src="{% static 'js/jquery.editable-select.min.js' %}"></script> <form class="form-horizontal" id="jsStayForm" method="post"> <table> <tr id="tradds"> <td> <select class="form-control m-b" name="virtual_cpu" id="virtual_cpu" autocomplete="off"> {% for cpu_i in cpu_list %} <option value="{{ cpu_i }}">{{ cpu_i }}</option> {% endfor %} </select> </td> <td> <select class="form-control m-b" name="virtual_mem" id="virtual_mem" autocomplete="off"> {% for mem_i in mem_list %} <option value="{{ mem_i }}">{{ mem_i }}</option> {% endfor %} </select> </td> </table> <button class="btn btn-primary" type="button" id="addCenterIpGrpBtn" Onclick="addCenterIpGrp(this)">新增一行</button> <button class="btn btn-primary btn-danger" id="jsStayBtn">添加虚拟机</button> </form> <script type="text/Javascript"> ##此处是进行使用插件，对下拉菜单进行可输入扩展 $('#virtual_cpu').editableSelect({ effects: 'slide' }); $('#virtual_mem').editableSelect({ effects: 'slide' }); ### 此处对需要动态添加输入表单进行扩展 var varCount =1; function addCenterIpGrp(obj) { varCount++; console.log(varCount); html = '<tr id="tradds">\n' + ' <td>\n' + ' <select class="form-control" name="virtual_cpu" id="virtual_cpu' + varCount + '" autocomplete="off">\n' + ' {% for cpu_i in cpu_list %}\n'+ ' <option value="{{ cpu_i }}">{{ cpu_i }}</option>\n'+ ' {% endfor %}\n' + ' </select>\n' + ' </td>\n' + ' <td>\n' + ' <select class="form-control m-b" name="virtual_mem" id="virtual_mem' + varCount + '" autocomplete="off">\n' + ' {% for mem_i in mem_list %}\n'+ ' <option value="{{ mem_i }}">{{ mem_i }}</option>\n'+ ' {% endfor %}\n' + ' </select>\n' + ' </td>\n' + '</tr>'; ### 动态新增表单 var d1 = document.getElementById('tradds'); d1.insertAdjacentHTML('afterend', html); $("#virtual_cpu" + varCount).editableSelect({ effects: 'slide' }); $("#virtual_mem" + varCount).editableSelect({ effects: 'slide' }); ### 在此处，对动态添加的表单使用 jquery.validate 校验 $("#virtual_cpu" + varCount).rules("add", { required: true, digits: true, min: 1, max: 64, messages: { digits: "请输入正整数" } }); } ##对整体表单进行校验 $("#jsStayForm").validate({ rules:{ virtual_cpu:{ required:true, digits:true, min:1, max:64, }, virtual_mem:{ required:true, digits:true, min: 1, max: 128, }, submitHandler:function(form) { alert('ddd'); $.ajax({ ..... }); } }); <script>