1. 程式人生 > >jQuery1.9+中刪除了live以後的替代方法

jQuery1.9+中刪除了live以後的替代方法

根據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");   
複製程式碼

相關推薦

jQuery1.9+除了live以後替代方法

根據jQuery的官方描述,live方法在1.7中已經不建議使用,在1.9中刪除了這個方法。並建議在以後的程式碼中使用on方法來替代。   on方法可以接受三個引數:事件名、觸發選擇器、事件函式。 需要特別注意的是:on方法中間的這個觸發選擇器就是你將要新增的HTML元素的

windows在登錄檔除了HKEY_CLASSES_ROOT\.exe導致無法開啟.exe檔案

一不小心將登錄檔中的HKEY_CLASSES_ROOT\.exe刪除,導致.exe檔案全部打不開。本想重新新增一個值到登錄檔,卻發現就連登錄檔都打不開。win+R,輸入regedit都打不開。還好網上教程多。 新建一個txt檔案。寫入下面的內容。 Windows Registry Edito

phpcal_days_in_month不可用時的替代方法

在計算某個月中的天數時,由於PHP編譯時沒有加上--enable-calendar選項,會導致cal_days_in_month方法不可用。 這時,如果不能更改伺服器的編譯設定,可以通過以下方法實現該功能 $dayCount = date("t",strtotime("20

jsp引用css無效的替代方法

今天想寫個demo練手,在寫一個jsp時,引用jsp外部資料夾下的css時,總是不成功,但是在jsp頁面按ctrl點選卻可以跟蹤過去,不會是路徑的問題,試了半天沒找出原因,最後用<%=request.getContextPath()%>/css來引用的。

jquery1.9.1checkbox第一次移除後再新增checked不顯示的問題

今天做專案的時候發現一個問題,點單選按鈕是時要把複選框的框框勾上,點否的時候取消勾勾,第一次點時,還可以勾上和取消,但是第二次做的時候複選框的勾勾怎麼也加不上了,但是使用F12除錯工具看的時候看見這個

jquery1.9版本live方法變為on

     jquery1.9版本把live變為了on $(document).on('click', '.cap_issue', function(){ $('.be_model').dialog('open'); })

記錄一下誤除了mysql表的資料後的恢復過程

用navicat刪除資料庫中的入侵資料,導致刪順手了,把一些看似重複資料的重要資料在表中直接右鍵刪除掉了(相當於delete from table命令),而該資料庫沒有做過這些資料的備份,同時沒有開啟

Java 9 9 個新特性

不想 行為 添加元素 ase 結合 quest 簡單 通過 this Java 8 發布三年多之後,即將快到2017年7月下一個版本發布的日期了。 你可能已經聽說過 Java 9 的模塊系統,但是這個新版本還有許多其它的更新。 這裏有九個令人興奮的新功能將與 Java 9

AndroidgetDrawable和getColor過時的替代方法

this logs con 知識 log launcher 16px ase spa 版權聲明:本文為博主原創文章,未經博主允許不得轉載。 前言 Android SDK 升級到 23 之後,getDrawable和getColor方法提示過時。 解決方案 getRe

Jquery的bind(),live(),delegate(),on()綁定事件方式 前言

文章 let com 多說 空格 code html event 進行 前言   因為項目中經常會有利用jquery操作dom元素的增刪操作,所以會涉及到dom元素的綁定事件方式,簡單的歸納一下bind,live,delegate,on的區別,以便以後查閱,也希望該文章日後

用delete命令來個不小心除了user表,導致損失了時間和精力

mysql apache delete 運行環境:操作系統:CentOS release 6.8 (Final)數據庫:MySQL 5.5.52-cll-lveWeb應用軟件:Apache/2.2.15(Unix)問題:操作mysql數據庫的user表,計劃刪除一條重復的記錄,不小心刪除了整個us

mysql 存儲過程使用遊標使用臨時表可以替代數組效果

效果 tmp declare ges 必須 eight bold lar ora mysql不支持數組。但有時候需要組合幾張表的數據,在存儲過程中,經過比較復雜的運算獲取結果直接輸出給調用方,比如符合條件的幾張表的某些字段的組合計算,mysql臨時表可以解決這個問題.臨時表

chrome最強大的瀏覽器插件推薦,只要你會用其他的插件你可以除了

資料 工作 tle pow 8g內存 加載 多人 常見 常識 我們在學習和工作中經常會需要用到各種各樣不同需求的插件,結果chrome插件越裝越多,chrome瀏覽器也越來越慢!有時候鏈我們自己都懵圈了,一時間都想不起來這個插件是幹什麽用的。更可氣的是,很多時候插件好不容易

jquery1.9以上版本如何使用toggle函數

return this 但是 com default prev 處理 clas ++ toggle() 方法用於綁定兩個或多個事件處理器函數,以響應被選元素的輪流的 click 事件。 但是在1.9及以上的版本中已經刪除了該功能。 感覺這個功能還是不錯的,以下來自網上搜集,

Java 數組除數據

for length == rgs arr stat index pub java 數組 package blue; public class array { public static void main(String[] args) { // TODO Auto

阿裏雲ECS在CentOS 6.9使用Nginx提示:nginx: [emerg] socket() [::]:80 failed (97: Address family not supported by protocol)的解決方法

命令 led spm 屏蔽 def fault 執行 ddr aliyun 說明: 1、[::]:80這個是IPv6的地址。 2、阿裏雲截至到今天還不支持IPv6。 解決方式: 1、普通解決方式:開啟IPv6的支持,不過這個方法在阿裏雲行不通。 vim /et

iOS 9 可用的受信任根證書列表

ted zh-cn rsa cti 文件 政策 序列號 support tro iOS 受信任證書存儲區包含隨 iOS 預安裝的可信根證書。 https://support.apple.com/zh-cn/HT205205 關於信任和證書 iOS 9 受信任證書存

CentOS6.9搭建FTP服務器

ddr write wrapper 傳輸 登錄系統 說明 nbsp listen 下載 1 基本環境系統版本IP地址安裝方式ftp版本CentOS6.910.0.0.8yumvsftpd-2.2.2-242 ftp工作模式2.1 ftp通道ftp工作會啟動兩個通道:控制通道

RedHat6.9編制安裝zabbix-3.4.7,DB用percona mysql 5.7.20

zabbix percona mysql linux 監控 zabbix配置 軟件版本:Redhat6.9zabbix-3.4.7percona mysql-5.7.20 準備工作:關閉防火墻,或者添加相應端口。關閉selinux ———— (安裝如下zabbix依賴包)————####這

jQuery1.9+版本的.on使用方法筆記

jQuery在jQuery1.7以前,異步加載的內容如果有click事件,都是使用.live方法。jQuery升級到1.9以後,本方法不再適用,改為.on方法。.on方法可以接受3個參數:事件名,觸發選擇器,事件函數。舉例說明:某html文檔中有一個id為parent的div,在這個div內再添加一個id為s