首頁 > web前端 > js教程 > 主體

jQuery1.9以上版本中刪除了live以後的替代方法具體介紹

黄舟
發布: 2017-06-26 09:31:54
原創
1223 人瀏覽過

根據jQuery的官方描述,live方法在1.7中已經不建議使用,在1.9中刪除了這個方法。並建議在以後的程式碼中使用on方法來替代。
  on方法可以接受三個參數:事件名、觸發選擇器、事件函數。

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

例如我的html文件中已經有了一個id為parent的p,我將要在這個p內部再動態加入一個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("p").live("click",function(){
  alert("x");
}).addClass("x");//jQuery1.9+$("#panel").on("click","p",function(){
  alert("x");
}).find("p").addClass("x");   
登入後複製

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

以上是jQuery1.9以上版本中刪除了live以後的替代方法具體介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!