论坛首页 Web前端技术论坛

jquery 事件失效问题

浏览 2333 次
该帖已经被评为隐藏帖
作者 正文
   发表时间:2009-11-20  

       问题如下:

我今天做一个联动下拉框的时候,遇到了一个奇怪的问题,在ready方法里面注册的事件失效了!比如:$("#province").change(function(){........})当我改变id为province下拉框的值的时候,这个方法并没有执行!原因如下:

1.html部分代码

<select id="province"> 
<option value="default">请选择</option>
</select>
<select id="section">
<option value="default">请选择</option>
</select>
<select id="estate" name="id_area">
<option value="default">请选择</option>
</select>

 2.部分js代码

$(document).ready(function(){
  	//发送一个AJAX请求 (获得全国省份信息)
	$.ajax({
		type:"post",
		dataType:"xml",
		url:"areaAction.do",
		data:"action=getProvince",
                success:function(data){
		//需要追加的字符串
		var appendHtml="";
		//循环加载
		$(data).find("node").each(function(i){
		appendHtml+="<option value='"+$(data).find("node id").eq(i).text()+"'>"
		+$(data).find("node name").eq(i).text()+"</option>";
		}
		)
		//追加HTML代码
		$("#province").append(appendHtml);
		},
		error:function(XMLResponse){
			alert("获取省份信息失败");
			}
		});

 当加载html页面的时候,我发送了一个AJAX请求,请求获得全国的省份信息。在

<select id="province"> 
<option value="default">请选择</option>
</select>

之间追加了一些选项。如果不发送这个请求,$("#province").change(function(){........})函数就会被触发,但是你一但发送,相当于就改变了id为province的下拉框,以前注册的change事件就失效了!至于原因,我也不是很清楚。不过如果这样写就可以:

$("#province").live("change",function(){.....});

 live事件API文档解释如下

live( type, fn )

jQuery 1.3中新增的方法。给所有当前以及将来会匹配的元素绑定一个事件处理函数(比如click事件)。也能绑定自定义事件。

目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。
还不支持 blur, focus, mouseenter, mouseleave, change, submit
与bind()不同的是,live()一次只能绑定一个事件。

这个方法跟传统的bind很像,区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说,如果你给页 面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时,对于这个新增加的li,其click事件依然可用。而无需重新给 这种新增加的元素绑定事件。

       我的理解就是:无论页面是否会局部刷新,这样绑定的话,这个事件始终有效,而且还对新增加的标签有效果!

 

   发表时间:2009-11-22  
你要绑定事件。
$().bind('change',fn)

live也行。
0 请登录后投票
   发表时间:2009-11-23  
看楼主介绍的live定义,有点懒绑定,延迟绑定的意思啊
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics