jquery 事件失效以及解决方法

主要区分于：bind ()与live()方法。
.live() 就提供了对应这种状况的方法。若是咱们是这样绑定click事件的：

$('.clickme').live('click', function() {
  alert("Live handler called."); 
});

而后再添加一个新元素：

$('body').append('<div class="clickme">Another target</div>');

而后再点击新增的元素，他依然可以触发事件处理函数。

事件委托

.live() 方法能对一个尚未添加进DOM的元素有效，是因为使用了事件委托：绑定在祖先元素上的事件处理函数能够对在后代上触发的事件做出回应。传递给 .live() 的事件处理函数不会绑定在元素上，而是把他做为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。在咱们的例子中，当点击新的元素后，会依次发生下列步骤：

1. 生成一个click事件传递给 <div> 来处理
2. 因为没有事件处理函数直接绑定在 <div> 上，因此事件冒泡到DOM树上
3. 事件不断冒泡一直到DOM树的根节点，默认状况下上面绑定了这个特殊的事件处理函数。
4. 执行由 .live() 绑定的特殊的 click 事件处理函数。
5. 这个事件处理函数首先检测事件对象的 target 来肯定是否是须要继续。这个测试是经过检测 $(event.target).closest('.clickme') 可否找到匹配的元素来实现的。
6. 若是找到了匹配的元素，那么调用原始的事件处理函数。

因为只有在事件发生时才会在上面的第五步里作测试，所以在任什么时候候添加的元素都可以响应这个事件。

 

0 0

jquery 事件失效问题10

       问题以下：

我今天作一个联动下拉框的时候，遇到了一个奇怪的问题，在ready方法里面注册的事件失效了！好比：$("#province"）.change(function(){........})当我改变id为province下拉框的值的时候，这个方法并无执行！缘由以下：

1.html部分代码

Html代码  

1. <select id="province">    
2. <option value="default">请选择</option>  
3. </select>  
4. <select id="section">  
5. <option value="default">请选择</option>  
6. </select>  
7. <select id="estate" name="id_area">  
8. <option value="default">请选择</option>  
9. </select>  

<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代码

Js代码 

1. $(document).ready(function(){   
2.     //发送一个AJAX请求 （得到全国省份信息）   
3.     $.ajax({   
4.         type:"post",   
5.         dataType:"xml",   
6.         url:"areaAction.do",   
7.         data:"action=getProvince",   
8.                 success:function(data){   
9.         //须要追加的字符串   
10.         var appendHtml="";   
11.         //循环加载   
12.         $(data).find("node").each(function(i){   
13.         appendHtml+="<option value='"+$(data).find("node id").eq(i).text()+"'>"  
14.         +$(data).find("node name").eq(i).text()+"</option>";   
15.         }   
16.         )   
17.         //追加HTML代码   
18.         $("#province").append(appendHtml);   
19.         },   
20.         error:function(XMLResponse){   
21.             alert("获取省份信息失败");   
22.             }   
23.         });  

$(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请求，请求得到全国的省份信息。在

Html代码  

1. <select id="province">    
2. <option value="default">请选择</option>  
3. </select>  

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

之间追加了一些选项。若是不发送这个请求，$("#province"）.change(function(){........})函数就会被触发，可是你一但发送，至关于就改变了id为province的下拉框，之前注册的change事件就失效了！至于缘由，我也不是很清楚。不过若是这样写就能够：

Js代码  

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

$("#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事件依然可用。而无需从新给这种新增长的元素绑定事件。