问题描述：

使用layui创建表单弹出层，监测提交事件

由于表单是通过layui的弹出层动态渲染的，所以不能直接为form表单绑定submit事件。原本采取了事件委托，监听body发生的submit事件，但是提交时第一次提交没问题，第二次提交两次，第三次提交三次，第四次提交四次……

  //   5.通过代理的形式为表单绑定submit事件，点击按钮后form才会存在，所以直接绑定不了
  document.querySelector('body').addEventListener('submit',function(e){
  
    e.preventDefault()
   
    if(e.target.id==='form_add'){
        console.log(2);
        let data = form.val("addArticle")
   
        $.ajax({
            type:'POST',
            url:'/my/article/addcates',
            data:data,
            success:function(res){
          if(res.status!==0) return layui.layer.msg('添加文章类别失败')
          // 重新调用模板渲染函数
          getArticle ()
          layui.layer.msg('新增文章分类成功！')
    

        // 关闭弹出层
        layui.layer.close(indexAdd)
            }
        
        })
    }
  
   })

解决方法：

直接使用layui的 表单提交功能，找到layui的文档：

1. 在html中给form表单设置lay-filer值

 <form class="layui-form"  lay-filter="自定义的filer属性">
</form>

2. 在js中，利用layui监测指定表单的提交事件

let form = layui.form
form.on('submit(自定义的filter属性)', function(data){
  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
      

最后一行关键return false，阻止表单跳转，应该是和e.preventDefault()作用相当。

这里的data.form和data.field，由于我的form表单实际不存在，所以拿不到值。若想快速取值，可以使用layui表单取值功能：

3.layui表单取值

let data1 = form.val("自定义的filer属性");

4.完整过程

    //   layui监测表单提交事件
      form.on('submit(addArticle)', function(data){
     
  
        let data1 = form.val("addArticle")
        $.ajax({
                        type:'POST',
                        url:'/my/article/addcates',
                        data:data1,
                        success:function(res){
                      if(res.status!==0) return layui.layer.msg('添加文章类别失败')
                      // 重新调用模板渲染函数
                      getArticle ()
                      layui.layer.msg('新增文章分类成功！')
                
            
                    // 关闭弹出层
                    layui.layer.close(indexAdd)
                        }
                    
                    })
        
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
      });