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.綁定事件的做用域改爲全局