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);
	});
});

本文固定链接: https://jucelin.com/jquery-bind-unbind-bug.html | Jucelin

该日志由 jucelin 于2013年03月11日发表在 前端设计 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: jquery触发两次onchange事件 | Jucelin
关键字: , ,

jquery触发两次onchange事件:目前有7 条留言

  1. 5楼
    遇见:

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

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

    2013-12-17 17:33
    • jucelin:

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

      2013-12-18 19:00
  2. :razz: 还没有发生过,不过IE真是个麻烦货!

    2013-10-11 19:41
    • jucelin:

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

      2013-10-16 19:00
  3. 地板
    灰狼:

    跟上一篇文章相差好久啊~~~

    2013-06-01 00:25
  4. 板凳
    淘热影视:

    真的这么好么,耿

    2013-03-16 22:50
  5. 沙发
    君说:

    JS,真心看不懂… :shock:

    2013-03-12 08:48

发表评论

您必须 [ 登录 ] 才能发表留言!

更多