之前做項(xiàng)目都是直接用jquery的bind綁定事件，不過當(dāng)時都不是動態(tài)生成dom元素，而是已經(jīng)頁面中原本存在的dom元素進(jìn)行事件綁定，最近在測試給動態(tài)生成的dom綁定事件的時候發(fā)現(xiàn)事件失效，于是就測試了一下：

1. 事件失效的原因：

（1）bind事件綁定只對dom中存在的元素有效，對于我們后來動態(tài)增加的元素是監(jiān)測不到，所以綁定不了

（2）同樣，當(dāng)你使用var aa = document.getElementsByTagName("動態(tài)生成的元素");來獲取動態(tài)生成的元素的時候也是獲取不到的，因?yàn)榫W(wǎng)頁只會執(zhí)行一次初始化綁定，之后動態(tài)生成的dom元素也是監(jiān)測不到的。

2. 解決辦法：

（1）在每一個動態(tài)生成的地方都再綁定多一次事件，比如這個博客里面的例子

（2）把bind改用live，因?yàn)閘ive是實(shí)時監(jiān)測的，對于新增的dom元素也是有效的（因?yàn)椴粩嗳ソ壎ā⑴袛?，所以可能會影響Web性能問題）

（3）把bind改用delegate，因?yàn)閐elegate是實(shí)時監(jiān)測的。

（4）在jquery1.7 起版本用on替代了bind()、live() 和 delegate() 方法。

3. 關(guān)于最近遇到的事件失效的原因：在原本的網(wǎng)頁中（代碼可見https://github.com/UFOwl/ife/tree/master/stage02/task16），我想要獲取table里面動態(tài)生成的刪除按鈕，幫刪除按鈕綁定刪除時間，可是刪除事件失效，因?yàn)閯h除按鈕是動態(tài)生成的，初始化事件綁定的時候，獲取到的table里面的button已經(jīng)是空的，所以綁定的一直都是空元素，所以點(diǎn)擊button按鈕的時候一直沒有反應(yīng)。

4. 最后的解決辦法：先獲取table，然后再綁定table的click事件（因?yàn)閠able是在原本已經(jīng)存在的dom元素），然后當(dāng)點(diǎn)擊事件觸發(fā)的時候再捕獲事件的target（比如點(diǎn)擊table里面的button，這個時候因?yàn)橐呀?jīng)動態(tài)生成button并append進(jìn)去table里面了，所以button是存在的，此時target指的是button），然后再進(jìn)行相應(yīng)的操作。

注意：在這里注意兩個問題：

（1）table里面的元素是已經(jīng)添加進(jìn)入table里面了的，所以點(diǎn)擊那個button的時候，e.target獲取到的就是button

（2）為什么已經(jīng)將button這些元素添加進(jìn)入table里面，可是還是沒能獲取到呢，因?yàn)槭莍nit()這個函數(shù)初始化的時候獲取table里面的button，可是此時還未進(jìn)行任何操作，所以獲取到的就是空，所以沒綁定任何元素。

上面需要注意的兩個問題要分清楚，這個是問題的關(guān)鍵。

5.關(guān)于bind：每次綁定事件之后事件會一直綁定著，除非用unbind解綁之后再重新綁定，要不然事件會一直存在，所以這就是為什么在做項(xiàng)目的時候，有時候ajax請求的結(jié)果會出現(xiàn)1,2,4,8這樣疊加，是因?yàn)槿绻昧薭ind，每次觸發(fā)事件都會綁定一次操作，所以觸發(fā)第一次的時候，ajax請求一次；第二次的時候，ajax請求1+1=2次；第三次就是1+2+1=4次；第四次就是1+2+4+1=8次，以此類推。所以如果利用bind綁定事件的話，要先unbind解綁元素原本有的事件再綁定事件，才不會導(dǎo)致ajax請求多次。

以上這篇關(guān)于動態(tài)生成dom綁定事件失效的原因及解決方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論