jQuery live事件的使用詳解
概述
jQuery 給所有符合的元素附加一個事件處理函數，即使這個元素是以後再加入進來的也有效。
這個方法是基本是的 .bind() 方法的變體。使用 .bind() 時，選擇器所符合的元素會附加一個事件處理函數，而以後再新增的元素則不會有。為此需要再使用一次 .bind() 才行。例如說
<body> <div class="clickme">Click here</div> </body>
可以給這個元素綁定一個簡單的click事件：
$('.clickme').bind('click', function() {
alert("Bound handler called.");
});當點擊了元素，就會彈出一個警告框。然後，想像一下這之後有另一個元素添加進來了。
$('body').append('<div class="clickme">Another target</div>');
儘管這個新的元素也能夠匹配選擇器 ".clickme" ，但是由於這個元素是在調用 .bind() 之後添加的，所以點擊這個元素不會有任何效果。
.live() 就提供了對應這種情況的方法。如果我們是這樣綁定click事件的：
$('.clickme').live('click', function() {
alert("Live handler called.");
});然後再加入一個新元素：
$('body').append('<div class="clickme">Another target</div>');
然後再點擊新增的元素，他依然能夠觸發事件處理函數。
事件委託
.live() 方法能對一個還沒有添加進DOM的元素有效，是由於使用了事件委託：綁定在祖先元素上的事件處理函數可以對在後代上觸發的事件作出回應。傳遞給 .live() 的事件處理函數不會綁定在元素上，而是把他當作一個特殊的事件處理函數，綁定在 DOM 樹的根節點上。在我們的例子中，當點擊新的元素後，會依序發生下列步驟：
產生一個click事件傳遞給
來處理
由於沒有事件處理函數直接綁定在 事件不斷冒泡一直到DOM樹的根節點，預設情況下上面綁定了這個特殊的事件處理函數。 執行由 .live() 綁定的特殊的 click 事件處理函數。 這個事件處理函數先偵測事件物件的 target 來決定是不是需要繼續。這個測試是透過檢測 $(event.target).closest('.clickme') 能否找到匹配的元素來實現的。 如果找到了符合的元素，那麼呼叫原始的事件處理函數。 由於只有在事件發生時才會在上面的第五步裡做測試，因此在任何時候添加的元素都能夠回應這個事件。 附加說明 .live() 雖然很有用，但由於其特殊的實作方式，所以不能簡單的實作方式在任何情況下都不能替換 .bind()。主要的不同有： 在jQuery 1.4中，.live()方法支援自訂事件，也支援所有的 JavaScript 事件。在jQuery 1.4.1中，甚至也支援 focus 和 blue 事件了（映射到更合適，並且可以冒泡的focusin和focusout上）。另外，在jQuery 1.4.1中，也能支援hover（映射到"mouseenter mouseleave"）。然而在jQuery 1.3.x中，只支援支援的JavaScript事件和自訂事件：click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, 和mouseup. .live() 並不完全支援透過DOM遍歷的方法找到的元素。取而代之的是，應當總是在一個選擇器後面直接使用 .live() 方法，正如前面例子所提到的。 當一個事件處理函數用 .live() 綁定後，要停止執行其他的事件處理函數，那麼這個函數必須傳回 false。 僅僅呼叫 .stopPropagation() 就無法達成這個目的。 參考 .bind() 方法可以獲得更多關於事件綁定的資訊。 在jQuery 1.4.1 中，.live() 能接受多個，用空間分隔事件，在提供類似.bind()的功能 。例如，我們可以「live 」 同時綁定mouseover和mouseout事件,像這樣： 在jQuery 1.4.3中:你可以綁定一個或多個事件類型的字串和函數的資料映射來執行他們 在jQuery 1.4 中，data參數可以用來把附加資訊傳遞給事件處理函數。一個很好的用處是應付閉包導致的問題。可以參考 .bind() 的討論來獲得更多資訊。 在jQuery 1.4 中， live事件可以綁定到「context」DOM元素，而不是預設的文檔的根。要設定此背景下，我們透過在單一的DOM元素(而不是一個jQuery集合或選擇器)使用jQuery() function's second argument。 参数 type,[fn]String,FunctionV1.3 type:一个或多个事件类型，由空格分隔多个事件。 fn:要从每个匹配元素的事件中反绑定的事件处理函数 type,[data],falseString,Array,boolV1.4 type:一个或多个事件类型，由空格分隔多个事件。 data:传递给事件处理函数的附加参数 false:设置为false会使默认的动作失效。 eventStringV1.4.3 一个或多个事件类型的字符串和函数的数据映射来执行他们 示例 描述: 点击生成的p依然据有同样的功能。 HTML 代码: jQuery 代码: 描述: 阻止默认事件行为和事件冒泡，返回 false jQuery 代码: 描述: 仅仅阻止默认事件行为 jQuery 代码: 这是代码，用live绑定的事件不执行，但是创建的元素能添加进去。这是为什么 你的_html是字符串啊，你是不是要点击li触发事件？ 以上是jQuery live事件的使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！$('.hoverme').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
// do something on mouseover
} else {
// do something on mouseout
}
});$("a").live({
click: function() {
// do something on click
},
mouseover: function() {
// do something on mouseover
}
});$('div.clickme', $('#container')[0]).live('click', function() {
// Live handler called.
});<p>Click me!</p>
$("p").live("click", function(){ $(this).after("<p>Another paragraph!</p>"); });$("a").live("click", function() { return false; });$("a").live("click", function(event){ event.preventDefault(); });
那应该是$('li').live('click',function(){....})
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
crystaldiskmark是什麼軟體？ -crystaldiskmark如何使用？
Mar 18, 2024 pm 02:58 PM
CrystalDiskMark是一款適用於硬碟的小型HDD基準測試工具，可快速測量順序和隨機讀取/寫入速度。接下來就讓小編為大家介紹一下CrystalDiskMark，以及crystaldiskmark如何使用吧~一、CrystalDiskMark介紹CrystalDiskMark是一款廣泛使用的磁碟效能測試工具，用於評估機械硬碟和固態硬碟（SSD）的讀取和寫入速度和隨機I/O性能。它是一款免費的Windows應用程序，並提供用戶友好的介面和各種測試模式來評估硬碟效能的不同方面，並被廣泛用於硬體評
foobar2000怎麼下載？ -foobar2000怎麼使用
Mar 18, 2024 am 10:58 AM
foobar2000是一款能隨時收聽音樂資源的軟體，各種音樂無損音質帶給你，增強版本的音樂播放器，讓你得到更全更舒適的音樂體驗，它的設計理念是將電腦端的高級音頻播放器移植到手機上，提供更便捷高效的音樂播放體驗，介面設計簡潔明了易於使用它採用了極簡的設計風格，沒有過多的裝飾和繁瑣的操作能夠快速上手，同時還支持多種皮膚和主題，根據自己的喜好進行個性化設置，打造專屬的音樂播放器支援多種音訊格式的播放，它還支援音訊增益功能根據自己的聽力情況調整音量大小，避免過大的音量對聽力造成損害。接下來就讓小編為大
BTCC教學：如何在BTCC交易所綁定使用MetaMask錢包？
Apr 26, 2024 am 09:40 AM
MetaMask（中文也叫小狐狸錢包）是一款免費的、廣受好評的加密錢包軟體。目前，BTCC已支援綁定MetaMask錢包，綁定後可使用MetaMask錢包進行快速登錄，儲值、買幣等，且首次綁定還可獲得20USDT體驗金。在BTCCMetaMask錢包教學中，我們將詳細介紹如何註冊和使用MetaMask，以及如何在BTCC綁定並使用小狐狸錢包。 MetaMask錢包是什麼？ MetaMask小狐狸錢包擁有超過3,000萬用戶，是當今最受歡迎的加密貨幣錢包之一。它可免費使用，可作為擴充功能安裝在網絡
網易信箱大師怎麼用
Mar 27, 2024 pm 05:32 PM
網易郵箱，作為中國網友廣泛使用的一種電子郵箱，一直以來以其穩定、高效的服務贏得了用戶的信賴。而網易信箱大師，則是專為手機使用者打造的信箱軟體，它大大簡化了郵件的收發流程，讓我們的郵件處理變得更加便利。那麼網易信箱大師該如何使用，具體又有哪些功能呢，下文中本站小編將為大家帶來詳細的內容介紹，希望能幫助到大家！首先，您可以在手機應用程式商店搜尋並下載網易信箱大師應用程式。在應用寶或百度手機助手中搜尋“網易郵箱大師”，然後按照提示進行安裝即可。下載安裝完成後，我們打開網易郵箱帳號並進行登錄，登入介面如下圖所示
百度網盤app怎麼用
Mar 27, 2024 pm 06:46 PM
在如今雲端儲存已成為我們日常生活和工作中不可或缺的一部分。百度網盤作為國內領先的雲端儲存服務之一，憑藉其強大的儲存功能、高效的傳輸速度以及便捷的操作體驗，贏得了廣大用戶的青睞。而且無論你是想要備份重要文件、分享資料，還是在線上觀看影片、聽取音樂，百度網盤都能滿足你的需求。但很多用戶可能對百度網盤app的具體使用方法還不了解，那麼這篇教學就將為大家詳細介紹百度網盤app如何使用，還有疑惑的用戶們就快來跟著本文詳細了解一下吧！百度雲網盤怎麼用：一、安裝首先，下載並安裝百度雲軟體時，請選擇自訂安裝選
Win11管理員權限取得詳解
Mar 08, 2024 pm 03:06 PM
Windows作業系統是全球最受歡迎的作業系統之一，其新版本Win11備受矚目。在Win11系統中，管理員權限的取得是一個重要的操作，管理員權限可以讓使用者對系統進行更多的操作和設定。本文將詳細介紹在Win11系統中如何取得管理員權限，以及如何有效地管理權限。在Win11系統中，管理員權限分為本機管理員和網域管理員兩種。本機管理員是指具有對本機電腦的完全管理權限
教你使用 iOS 17.4「失竊裝置保護」新進階功能
Mar 10, 2024 pm 04:34 PM
Apple在周二推出了iOS17.4更新，為iPhone帶來了一系列新功能和修復。這次更新包含了全新的表情符號，同時歐盟用戶也能夠下載其他應用程式商店。此外，更新還加強了對iPhone安全性的控制，引入了更多的「失竊設備保護」設定選項，為用戶提供更多選擇和保障。 "iOS17.3首次引入了「失竊設備保護」功能，為用戶的敏感資料增加了額外的安全保障。當用戶不在家等熟悉地點時，該功能要求用戶首次輸入生物特徵信息，並在一小時後再次輸入資訊才能存取和更改某些數據，如修改AppleID密碼或關閉失竊設備保護功能
Oracle SQL中的除法運算詳解
Mar 10, 2024 am 09:51 AM
OracleSQL中的除法運算詳解在OracleSQL中，除法運算是一種常見且重要的數學運算運算，用來計算兩個數相除的結果。除法在資料庫查詢中經常用到，因此了解OracleSQL中的除法運算及其用法是資料庫開發人員必備的技能之一。本文將詳細討論OracleSQL中除法運算的相關知識，並提供具體的程式碼範例供讀者參考。一、OracleSQL中的除法運算
