环境:在一个动态模块框中,由于新增和编辑的样式一样,所以我让两个操作共用一个模态框,而且共用一个提交按钮。但是两个操作放到两个不同的后台地址处理,那么问题来了,我在add和edit时,分别为submit按钮绑定不同的单击事件。我的理想是,点击了add后,submit的单击事件提交到后台的insert,点击edit后,submit的单击事件提交到后台的update。但是实际测试时,发现了一个致命的问题,就是页面是异步加载的,点击过submit后,会随着点击次数的增加,执行多次点击事件。
在添加或者编辑事件中存在一个click上传功能,上传就会出现一个Bug,代码如下:
function test(){
var i = 1;
$("#upload").click(function() {
alert(i++);
var barCode2 = trimStr($("#barCode").val());
if(barCode2 == ""){
$.alert("请先输入商品编码,然后在上传图片");
return false;
}
}
}
第一次使用点击upload时会弹出提示框 "1" 和 “请先输入商品编码,然后在上传图片”,此时无论取消编辑或者提交都正常;
第二次进入该页面点击upload时会弹出提示框"2",然后接着会弹出提示框"1",紧接着就是两次相同的“请先输入商品编码,然后在上传图片”;
第三次进入该页面点击upload时会弹出提示框 "3"、"2"、"1"、请先输入商品编码,然后在上传图片”....;
第四次进入该页面点击upload时会弹出提示框 "4"、 "3"、"2"、"1"、请先输入商品编码,然后在上传图片”....;
第五次.........
出现了这种问题,感觉像是曾经的冒泡和叠加,在网上多次寻找终于找到该问题属于click事件的重复绑定,于是记录下自己的错误和解决方案,不代表公用解决方案:
第一次return false时,会执行弹框事件;
第二次return false时,会寻找回自己的上一层(可以理解为父类)的事件中,知道出现return false,然后出发了自己的点击事件,又执行了弹框事件;
第三次点击事件就绑定了两个输出"3""及弹框,然后冒泡执行了父类的"2"、"1以及两次弹框;
...........
所以感觉每次上层都会记录下层的点击事件触发结果,而在下次触发时会一并触发结果。所以随着点击次数的增多,结果也在不断增多,因为我们不想要触发之前的点击事件,所以就需要每次在点击事件时候清空一下自身绑定,代码如下:
function test(){
var i = 1;
$("#upload").unbind('click').click(function() {
alert(i++);
var barCode2 = trimStr($("#barCode").val());
if(barCode2 == ""){
$.alert("请先输入商品编码,然后在上传图片");
return false;
}
}
}
这次输出的结果就是自己想要的每次i自增1,并且只会输出一个。。解决。