问题如下:
我今天做一个联动下拉框的时候,遇到了一个奇怪的问题,在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。 这个方法跟传统的bind很像,区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说,如果你给页 面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时,对于这个新增加的li,其click事件依然可用。而无需重新给 这种新增加的元素绑定事件。 |
我的理解就是:无论页面是否会局部刷新,这样绑定的话,这个事件始终有效,而且还对新增加的标签有效果!