在开发过程中,遇到了form表单在没有点击事件的时候,自动提交。导致报错。
但是目的是,在用户主动进行表单提交的时候,触发这个时间。
看一下代码:
<button class="layui-btn" lay-filter="add" lay-submit>新建工程</button>
js:
layui.use(['form'], function(){
$ = layui.jquery;
var form = layui.form;
form.on("submit",submitProject())
});
刚开始有查过其他的方法,尝试过1.将<button>
标签替换为<a>
标签,并更改type为“button”.其实和原来的button并没有区别
2.在表单中的按钮js回调函数中添加return false.但是这个的作用是制止用户在点击提交表单的时候,默认对表单进行二次提交。和本问题也无关联。
后来查了form的文档,找到了原因出现在回调函数的写法上。
如上写法,在表单加载的时候,就会执行到函数submitProject()。如果要达到用户点击触发,然后再提交表单的作用的话,需要外面再套一层函数。
如下写法:
layui.use(['form'], function(){
$ = layui.jquery;
var form = layui.form;
form.on("submit(add)",function(){
submitProject();
})
});
问题解决。
个人理解是,在form加载的时候,他的执行顺序是只能到达function这一层的。回调函数里面的内容能解读,但是并不会去执行,只有在触发提交的时候,才会去执行。所以加载的时候,只是告诉客户端,我这里有一个这么一个回调函数里面是有东西要执行的,你在提交表单的时候,我才会触发。否则我不会动。