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事件依然可用。而無需從新給這種新增長的元素綁定事件。