jquery触发两次onchange事件

因为项目中需要校验信息,又不想给服务器带来较大负荷,就使用onchange来实现校验。使用jquery绑定change事件,如下面的代码:


<script type="text/javascript">
        (document).ready(function()
        {('#test1').bind("change", function()
            {
                alert(this.value);
                this.value = this.value+"aa";
            });
        });

</script>
<input id="test1" type="text" />

演示地址:http://runjs.cn/detail/1r4wltof

测试环境

目前仅在IE8下发现此类问题,我仅测试了IE8/Chrome25/Firefox19

原因分析

google了下,有人将此问题归类为jqueryBUG,存在于1.4 – 1.6.4.版本,详见原帖内容
个人认为,在操作中js改变了input的内容,导致再次触发change事件。那么再次处罚了change事件后,内容也发生了改变,理论上应该进入死循环,但实际上只触发了2次。另外我也尝试了直接给input添加onchange属性来触发,开始时,也是触发了2次,但不知道改变了什么,后来仅触发了1次。

解决方法

我尝试了先解绑,再绑定的方法。注,#test1的方法是正确的,#test2的方法则是没实现的,作对比。setTimeout的方法来自这里.

(document).ready(function(){('#test1').bind("change", function(){
		var thatFun=arguments.callee;
		var that=this;

		(this).unbind("change",thatFun);

		//you can do something here
		alert(this.value);
		this.value=this.value+"aa";

		//rebind again
		setTimeout(function(){(that).bind("change",thatFun)},0);//why use setTimeout? sorry, I don't know...
	});

	//without setTimeout, it will not work. just like this.
	('#test2').bind("change", function(){(this).unbind("change",arguments.callee);
		alert(this.value);
		this.value=this.value+"aa";
		$(this).bind("change",arguments.callee);
	});
});

7 thoughts on “jquery触发两次onchange事件

  1. 遇见

    “有人将此问题归类为jquery的BUG,存在于1.4 – 1.6.4.版本”

    博主你用的是这个版本出的错误么?

    回复
    1. jucelin 文章作者

      用的是1.4,演示页面中使用的1.5。
      建议不用change绑定。

      回复
    1. jucelin 文章作者

      我们公司内部项目还有充分考虑IE6呢,折腾…

      回复

发表评论

邮箱地址不会被公开。 必填项已用*标注