DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> jQuery1.9+中刪除了live以後的替代方法
jQuery1.9+中刪除了live以後的替代方法
編輯:關於JavaScript     

根據jQuery的官方描述,live方法在1.7中已經不建議使用,在1.9中刪除了這個方法。並建議在以後的代碼中使用on方法來替代。

  on方法可以接受三個參數:事件名、觸發選擇器、事件函數。

需要特別注意的是:on方法中間的這個觸發選擇器就是你將要添加的HTML元素的類名、id或者元素名,使用它就可以實現live的效果。

例如我的html文檔中已經有了一個id為parent的div,我將要在這個div內部再動態添加一個class為son的span,然後我為這個span綁定一個事件,那麼我需要這樣寫:

$('#parent').on('click','.son',function(){alert('test')});

這個觸發選擇器實際上就是在 JQ內部判斷了一次事件參數的$(e.target).is(selector),只有觸發對象匹配觸發選擇器才會觸發。這是利用了事件冒泡的機制來完成 的,原本的live也是使用冒泡機制所以既然on可以實現那麼live也就沒有存在的必要了,只不過為了兼容讓它從1.7苟延殘喘的活到了1.9而已。

  這篇文章也沒啥內容了,接下來就用這個功能做點有意義的事情示范下吧~ 在低版本IE中A標簽在鼠標按下時候會出現虛線邊框,這是由focus造成的。我們只要在全局事件中做點手腳就能解決這個問題。在現代浏覽器中focus是不冒泡的,但是低版本浏覽器中可以冒泡。所以對於低版本浏覽器中對focus使用live是有效的。在jQuery1.9之前的版本我們可以這樣寫:

$("a").live("focus",function(){
this.blur();
}); 
jQuery1.9之後由於live被刪除了,所以應該這樣寫:
$(document).on("focus","a",function(){
this.blur();
}); 

還要注意個問題,如果是從live的寫法換成on的寫法別忘了調整調用鏈。因為live的返回值是事件觸發的對象,而使用on則是在容器對象上。

//jQuery1.9-
$("#panel").find("div").live("click",function(){
alert("x");
}).addClass("x");
//jQuery1.9+
$("#panel").on("click","div",function(){
alert("x");
}).find("div").addClass("x");   

注意最後的find("div"),其它就沒什麼問題了。

下面是官方說明

  http://jquery.com/upgrade-guide/1.9/#live-removed

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved