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.绑定事件的作用域改成全局