jQuery動(dòng)態(tài)添加的元素綁定事件處理函數(shù)代碼
更新時(shí)間:2011年08月02日 22:30:05 作者:
有一段時(shí)間沒(méi)用jquery了,今天又碰到這個(gè)問(wèn)題。當(dāng)時(shí)是知道有l(wèi)ivejquery可以解決。但是我并不喜歡為了這個(gè)而另外加載一個(gè)。
我當(dāng)時(shí)的處理方法是在添加的時(shí)候手工綁定事件處理函數(shù)。不過(guò)新版的jquery已經(jīng)添加了這個(gè)功能。我們已經(jīng)不需要為此煩惱了。
參考:http://api.jquery.com/live/
以前我們定義事件,比如為元素定義單擊事件是這樣寫的:
$('input').click(function () {
//處理代碼
});
或
$('.clickme').bind('click', function() {
// Bound handler called.
});
但是這只能是對(duì)已經(jīng)加載好的元素定義事件,那些后來(lái)添加插入的元素則需要另行綁定。即使你使用jquery的clone函數(shù),它并不能將事件也復(fù)制(到目前為止我還不清楚它是為什么這樣定義,是沒(méi)法復(fù)制還是刻意這么處理,以防止出現(xiàn)某些異常,這還有待去分析一下jquery的源代碼)。
現(xiàn)在,使用live你可以輕松搞定,
$('.clickme').live('click', function() { // Live handler called. });這樣,你即使在后面動(dòng)態(tài)插入的元素,也會(huì)被綁定事件,$('body').append('<div class="clickme">Another target</div>');
參考:http://api.jquery.com/live/
以前我們定義事件,比如為元素定義單擊事件是這樣寫的:
復(fù)制代碼 代碼如下:
$('input').click(function () {
//處理代碼
});
或
復(fù)制代碼 代碼如下:
$('.clickme').bind('click', function() {
// Bound handler called.
});
但是這只能是對(duì)已經(jīng)加載好的元素定義事件,那些后來(lái)添加插入的元素則需要另行綁定。即使你使用jquery的clone函數(shù),它并不能將事件也復(fù)制(到目前為止我還不清楚它是為什么這樣定義,是沒(méi)法復(fù)制還是刻意這么處理,以防止出現(xiàn)某些異常,這還有待去分析一下jquery的源代碼)。
現(xiàn)在,使用live你可以輕松搞定,
$('.clickme').live('click', function() { // Live handler called. });這樣,你即使在后面動(dòng)態(tài)插入的元素,也會(huì)被綁定事件,$('body').append('<div class="clickme">Another target</div>');
您可能感興趣的文章:
- jQuery給動(dòng)態(tài)添加的元素綁定事件的方法
- jQuery 綁定事件到動(dòng)態(tài)創(chuàng)建的元素上的方法實(shí)例
- jquery html動(dòng)態(tài)添加的元素綁定事件詳解
- jQuery動(dòng)態(tài)添加元素?zé)o法觸發(fā)綁定事件的解決方法分析
- jQuery頁(yè)面元素動(dòng)態(tài)添加后綁定事件丟失方法,非 live
- 淺談Jquery為元素綁定事件
- 解決jquery appaend元素中id綁定事件失效的問(wèn)題
- jQuery實(shí)現(xiàn)為動(dòng)態(tài)添加的元素綁定事件實(shí)例分析
- jQuery動(dòng)態(tài)生成的元素綁定事件操作實(shí)例分析
相關(guān)文章
jQuery實(shí)現(xiàn)移動(dòng)端懸浮拖動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)移動(dòng)端懸浮拖動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02基于jQuery的淡入淡出可自動(dòng)切換的幻燈插件打包下載
基于jQuery淡入淡出可自動(dòng)切換的幻燈插件,原型是前幾天寫的一個(gè)幻燈效果,因?yàn)橐粋€(gè)小bug卡了兩天,然后清空之前寫的代碼,重新整理思路寫出來(lái)的.2010-09-09JS實(shí)現(xiàn)點(diǎn)擊生成UUID的方法完整實(shí)例【基于jQuery】
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊生成UUID的方法,結(jié)合完整實(shí)例形式分析了基于jQuery實(shí)現(xiàn)的隨機(jī)字符串生成相關(guān)操作技巧,需要的朋友可以參考下2019-06-06jQuery插件Echarts實(shí)現(xiàn)的雙軸圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件Echarts實(shí)現(xiàn)的雙軸圖效果,結(jié)合完整實(shí)例形式分析了Echarts插件制作雙軸圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jQuery實(shí)現(xiàn)圖像旋轉(zhuǎn)動(dòng)畫效果
jquery動(dòng)畫旋轉(zhuǎn)效果在項(xiàng)目中經(jīng)常遇到這樣的需求,下面小編給大家分享具體實(shí)現(xiàn)代碼,感興趣的朋友一起學(xué)習(xí)吧2016-05-05為Jquery EasyUI 組件加上清除功能的方法(詳解)
下面小編就為大家?guī)?lái)一篇為Jquery EasyUI 組件加上清除功能的方法(詳解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04Asp.net下使用Jquery Ajax傳送和接收DataTable的代碼
對(duì)于習(xí)慣使用GridView的人來(lái)說(shuō),前臺(tái)頁(yè)面需要?jiǎng)討B(tài)添加表格的行數(shù),是一件痛苦的事。GridView處理這種事情相當(dāng)麻煩,你點(diǎn)擊“新增一行”,需要回傳到服務(wù)器。2010-09-09