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

人心 2019-06-25

1. 问题的出现

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

2.解决思路

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

点击添加

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

这里动态生成的input是做了非空的处理,然而真实情况下,点击保存还是可以直接提交空值

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

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

在chrome浏览器中查看事件,发现并没有keyup事件,那我就在想,有没有可能是绑定事件的时候还没有这个元素呢?于是决定用promise 改成异步

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

可以看到,事件已经绑定了,但是点击提交,还是没有验证,
jquery validate绑定动态生成的dom失效的问题及解决方案

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

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

可以看到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" 
            }
    }
    });
        `)

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

可以看到指向了input ,并且表单验证也生效了

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

3. 总结

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

相关推荐

wujingsheng0 / 0评论 2020-05-15

82500798 / 0评论 2014-11-07