JQuery事件委托(適用于給動態(tài)生成的腳本元素添加事件)
最近一段時間打了一個大仗,現(xiàn)在總算消停點,才有時間來做個總結(jié)吧算是:
移動端遇到一個項目,是一個列表的側(cè)滑欄,在我這里用jq寫的交互事件。自測各方面都挺好的,美滋滋的給了研發(fā)。研發(fā)也美滋滋的開始開發(fā)。
但是,好景不長。。。
研發(fā)加了ajax事件后,我的交互效果有部分受了影響!
一個小姑娘,在一群大老爺們研發(fā)堆里,對著昏暗的電腦和看不太懂的后臺代碼,改了半天。最后沒解決。我就回來了。
后來就找共同點,發(fā)現(xiàn)有個類名控制的交互都不能實現(xiàn),最后去問研發(fā),你是不是沒加上我的類名?
回:加著呢??!我一看模擬器,確實加著呢。但是看源碼,沒有,因為他使用ajax后期加的。。所以一開始事件找不到“接頭人”就沒有執(zhí)行。
掃噶,定位到問題,就好解決了。
之所以整理成隨筆,是因為我之前沒遇到過這個問題,聽過事件委托機制,但是根本沒研究過不知道適用于什么樣的bug場景。今天逮到了就不能放過!
jq寫了點擊事件,是通過獲取元素的類名被點擊后執(zhí)行對應(yīng)方法,但是研發(fā)套完模板,他會把所有的結(jié)構(gòu)先清空,導(dǎo)致jq根本找不到那個元素,所以事件就不得執(zhí)行了。
正規(guī)點的說:JS異步加載,JQ事件不被執(zhí)行解決方法(百度的標(biāo)題,hah)
jquery中動態(tài)新增的元素節(jié)點無法觸發(fā)事件問題(同上)
解決方法:


值得注意的是:親測此方法無效,可能是我用的jq的版本太高了,1.9多,已經(jīng)不支持這個方法了
第二個方法:

但是缺點是:給一個元素添加多個事件委托機制時,他就掛了。
$("div").delegate("button","click",function(){
console.log("start")
})
div下面的button點擊的時候,打印start,這個button可以是動態(tài)生成的
王者方法:on

相關(guān)文章
jQuery操作select下拉框的text值和value值的方法
這篇文章主要介紹了jQuery操作select下拉框的text值和value值的方法,需要的朋友可以參考下2014-05-05
詳解頁面滾動值scrollTop在FireFox與Chrome瀏覽器間的兼容問題
這篇文章主要介紹了詳解頁面滾動值scrollTop在FireFox與Chrome瀏覽器間的兼容問題 的相關(guān)資料,需要的朋友可以參考下2015-12-12
javascript異步處理與Jquery deferred對象用法總結(jié)
這篇文章主要介紹了javascript異步處理與Jquery deferred對象用法,結(jié)合實例形式總結(jié)分析了jQuery異步請求處理相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
jQuery的Each比JS原生for循環(huán)性能慢很多的原因
這篇文章主要介紹了jQuery的Each比JS原生for循環(huán)性能慢很多的原因的相關(guān)資料,需要的朋友可以參考下2016-07-07

