日期:2014-05-17  浏览次数:20814 次

关于JQuery的change事件重复触发问题
公司做了个页面,包含若干个input[type='file']按钮,用户根据需要上传一定数量的图片
-------------------------------------------此为背景-----------------------------------------------
背景提要:我为每个input[type='file']都绑定了change事件,包含在${document}.ready();当中;然后每次触发change事件,先全部解绑change事件,等上传成功之后,再对新的文件目录全部绑定change事件。

问题描述:现在打开页面,第一次上传不会有这个问题,接下来再上传或者替换图片就会重复触发change事件。比如:我要替换一张图片,然后我选择了相应的图片文件,紧接着确认上传;结果就弹出来好几个“替换成功 ”的提示。

各位元芳,你们怎么看?


------解决方案--------------------
通过返回false来取消默认的行为并阻止事件起泡。 

jQuery 代码:

$("form").bind("submit", function() { return false; }) 
--------------------------------------------------------------------------------

通过使用 preventDefault() 方法只取消默认的行为。 

jQuery 代码:

$("form").bind("submit", function(event){
  event.preventDefault();
}); 
--------------------------------------------------------------------------------

通过使用 stopPropagation() 方法只阻止一个事件起泡。 

jQuery 代码:

$("form").bind("submit", function(event){
  event.stopPropagation();
});