JS筆記 - JQ事件委托( 適用於給動態生成的腳本元素添加事件)


最近一段時間打了一個大仗,現在總算消停點,才有時間來做個總結吧算是:

移動端遇到一個項目,是一個列表的側滑欄,在我這里用jq寫的交互事件。自測各方面都挺好的,美滋滋的給了研發。研發也美滋滋的開始開發。

但是,好景不長。。。

研發加了ajax事件后,我的交互效果有部分受了影響!

一個小姑娘,在一群大老爺們研發堆里,對着昏暗的電腦和看不太懂的后台代碼,改了半天。最后沒解決。我就回來了。

后來就找共同點,發現有個類名控制的交互都不能實現,最后去問研發,你是不是沒加上我的類名?

回:加着呢啊!我一看模擬器,確實加着呢。但是看源碼,沒有,因為他使用ajax后期加的。。所以一開始事件找不到“接頭人”就沒有執行。

掃噶,定位到問題,就好解決了。

之所以整理成隨筆,是因為我之前沒遇到過這個問題,聽過事件委托機制,但是根本沒研究過不知道適用於什么樣的bug場景。今天逮到了就不能放過!

————————-----------------------------------------------------------非故事分割線------------------------------------------------------------------————————

jq寫了點擊事件,是通過獲取元素的類名被點擊后執行對應方法,但是研發套完模板,他會把所有的結構先清空,導致jq根本找不到那個元素,所以事件就不得執行了。

正規點的說:JS異步加載,JQ事件不被執行解決方法(百度的標題,hah)

jquery中動態新增的元素節點無法觸發事件問題(同上)

 

 

解決方法:

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

 

第二個方法:

但是缺點是:給一個元素添加多個事件委托機制時,他就掛了。

 

 王者方法:on

//模擬多個事件!成功
$(".hah").on('click','.shijian1',function(){
    alert('on-OK')
});
$(".hah").on('click','.shijian2',function(){
    alert('on-OK-多個事件')
});

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM