解決jQuery使用append添加的元素事件無(wú)效的問(wèn)題
jquery api官方的例子在新增的元素上添加事件
$(document).on("click",'#lyysb a',function(){
if(!$(this).hasClass('cur')){
$(this).addClass('cur');
} else {
$(this).removeClass('cur');
}
});
on() 方法在被選元素及子元素上添加一個(gè)或多個(gè)事件處理程序。
自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。
注意:使用 on() 方法添加的事件處理程序適用于當(dāng)前及未來(lái)的元素(比如由腳本創(chuàng)建的新元素)。
提示:如需移除事件處理程序,請(qǐng)使用 off() 方法。
提示:如需添加只運(yùn)行一次的事件然后移除,請(qǐng)使用 one() 方法。
*把事件綁定在docunmet就和原來(lái)的live方法沒(méi)有區(qū)別了。原先的live()方法,處理函數(shù)是默認(rèn)綁定在document對(duì)象上不能變的,如果DOM嵌套結(jié)構(gòu)很深,事件冒泡通過(guò)大量祖先元素會(huì)導(dǎo)致較大的性能損失。而使用.on()方法,事件只會(huì)綁定到$()函數(shù)的選擇符表達(dá)式匹配的元素上,因此可以精確地定位到頁(yè)面中的一部分,而事件冒泡的開(kāi)銷(xiāo)也可以減少。
例如我會(huì)在zkdiv中動(dòng)態(tài)添加多個(gè)class=”zk”的dom節(jié)點(diǎn),也想對(duì)動(dòng)態(tài)增加的節(jié)點(diǎn)綁定相同的事件則可以通過(guò)以下代碼實(shí)現(xiàn)
<div id="zkdiv"> <input type="button" value="展開(kāi)" id="zk" class="zk"/> <br> </div>
//展開(kāi)按鈕點(diǎn)擊觸發(fā)事件
$("#zkdiv").on("click",".zk",function(){
console.log("on 點(diǎn)擊一次");
});
var html2 = "<input type='button' class='zk' value='新生成的展開(kāi)' />";
$("#zkdiv").append(html2);
*這樣一來(lái)處理函數(shù)就綁定到#zkdiv的選擇器上去了,事件冒泡導(dǎo)致的性能損失會(huì)大大降低(使用該方法時(shí)要確保.on前面的選擇器能選擇到對(duì)象 否則不起作用)
click是點(diǎn)擊事件,但是在頁(yè)面加載完之后,jquery事件新添加的元素,用click的話是無(wú)法獲取元素的,這個(gè)時(shí)候要用on去獲取元素事件,簡(jiǎn)單的說(shuō)頁(yè)面加載完成時(shí)候頁(yè)面顯示的元素可以用on,也可以用click,但是頁(yè)面加載完成之后后期再追加的元素只能用on。
以上這篇解決jQuery使用append添加的元素事件無(wú)效的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- jquery?追加元素append、prepend、before、after用法與區(qū)別分析
- jquery append 動(dòng)態(tài)添加的元素事件on 不起作用的解決方案
- jQuery 追加元素的方法如append、prepend、before
- jQuery中append、insertBefore、after與insertAfter的簡(jiǎn)單用法與注意事項(xiàng)
- jQuery使用before()和after()在元素前后添加內(nèi)容的方法
- jquery.ajax之beforeSend方法使用介紹
- jquery追加元素的所有方法全面深入實(shí)例講解(append、prepend、after、before、wrap等等)
相關(guān)文章
(模仿京東用戶注冊(cè))用JQuery實(shí)現(xiàn)簡(jiǎn)單表單驗(yàn)證,初學(xué)者必看
下面小編就為初學(xué)者們分享一篇(模仿京東用戶注冊(cè))用JQuery實(shí)現(xiàn)簡(jiǎn)單表單驗(yàn)證,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
jQuery移動(dòng)web開(kāi)發(fā)中的頁(yè)面初始化與加載事件
這篇文章主要介紹了jQuery移動(dòng)web開(kāi)發(fā)中的頁(yè)面初始化與加載事件,是JavaScript移動(dòng)端頁(yè)面開(kāi)發(fā)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-12-12
jQuery實(shí)現(xiàn)Twitter的自動(dòng)文字補(bǔ)齊特效
本文介紹了一款jQuery實(shí)現(xiàn)的文字自動(dòng)補(bǔ)全特效的插件,該插件可以結(jié)合本地?cái)?shù)據(jù)進(jìn)行一些操作。推薦關(guān)注一下H5的幾種數(shù)據(jù)存儲(chǔ)的方式(localstorage與sessionstorage、IndexedDB、離線緩存manifest文件)2014-11-11
jquery 圓形旋轉(zhuǎn)圖片滾動(dòng)切換效果
今回給大家介紹個(gè)圓形旋轉(zhuǎn)的效果,基于圓形的物理特性,又圓上任意一點(diǎn)可以作為一個(gè)控制按鈕,然后拖動(dòng)它來(lái)使圖片輪換。2011-01-01
Jquery submit()無(wú)法提交問(wèn)題
代碼點(diǎn)擊注冊(cè)按鈕時(shí)無(wú)法提交表單,名稱(chēng)沖突可能會(huì)導(dǎo)致混亂的失敗,接下來(lái)為大家介紹下解決方法,感興趣的朋友可以了解下2013-04-04
基于jQuery.Hz2Py.js插件實(shí)現(xiàn)的漢字轉(zhuǎn)拼音特效
jQuery.Hz2Py.js插件實(shí)現(xiàn)的漢字轉(zhuǎn)拼音是一款很實(shí)用的在線轉(zhuǎn)換功能,此插件已經(jīng)把漢字打包成一個(gè)插件庫(kù),調(diào)用的時(shí)間很簡(jiǎn)單,只調(diào)用一個(gè)方法就可以實(shí)現(xiàn)轉(zhuǎn)換了2015-05-05
Jquery從頭學(xué)起第四講 jquery入門(mén)教程
今天主要講如何給主要的控件賦值,因?yàn)樵谧鼍W(wǎng)站的時(shí)候,很多時(shí)候需要初始化表單,所有給控件賦值就成必然的了。2010-08-08
jquery實(shí)現(xiàn)圖片輪播和滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)圖片輪播和滑動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01

