jquery validate绑定动态生成的dom失效的问题及解决方案

1. 问题的出现

jquery validate算是一个很经常使用的表单验证的插件，可是不能对动态生成的元素绑定验证事件
百度搜索也能够搜出一大堆相似的问题,可是没有找到解决方案，本身花了点时间解决了

2.解决思路

点击添加

这里动态生成的input是作了非空的处理，然而真实状况下，点击保存仍是能够直接提交空值

在chrome浏览器中查看事件，发现并无keyup事件，那我就在想，有没有多是绑定事件的时候尚未这个元素呢？因而决定用promise 改为异步

var promise = new Promise(function(resolve, reject) {
                $("#tab-1 .panel-body").prepend(acc); //动态添加元素
                resolve();
            }).then(function(resolve) {
                myAccValidate(GLOBAL.num); //添加绑定事件
            })

能够看到，事件已经绑定了，可是点击提交，仍是没有验证，

在浏览器中打个断点看下绑定事件的时候发生了什么

能够看到accSn并无指向input，而只是个字符串，那看来是做用域的问题 ，咱们把这段绑定的代码放到全局中运行

var accForm = "#accForm"+num;
        jQuery.globalEval(`
                $("${accForm}").validate({
        rules:{
            ${accSn}:{ 
                required:true,
                maxlength:20 
            },
            ${accName}:{
                required:true,
                maxlength:20 
            }
        },
        message:{
            ${accSn}:{ 
                required:"不能为空",
                maxlength:"长度不能超过20" 
            },
            ${accName}:{
                required:"不能为空",
                maxlength:"长度不能超过20" 
            }
    }
    });
        `)

能够看到指向了input ，而且表单验证也生效了

3. 总结

1.把生成元素和绑定事件改为异步
2.绑定事件的做用域改为全局