JS中click事件的累加和重复绑定事件

环境：在一个动态模块框中，由于新增和编辑的样式一样，所以我让两个操作共用一个模态框，而且共用一个提交按钮。但是两个操作放到两个不同的后台地址处理，那么问题来了，我在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，并且只会输出一个。。解决。