關(guān)于動(dòng)態(tài)生成dom綁定事件失效的原因及解決方法
之前做項(xiàng)目都是直接用jquery的bind綁定事件,不過當(dāng)時(shí)都不是動(dòng)態(tài)生成dom元素,而是已經(jīng)頁面中原本存在的dom元素進(jìn)行事件綁定,最近在測試給動(dòng)態(tài)生成的dom綁定事件的時(shí)候發(fā)現(xiàn)事件失效,于是就測試了一下:
1. 事件失效的原因:
(1)bind事件綁定只對dom中存在的元素有效,對于我們后來動(dòng)態(tài)增加的元素是監(jiān)測不到,所以綁定不了
(2)同樣,當(dāng)你使用var aa = document.getElementsByTagName("動(dòng)態(tài)生成的元素");來獲取動(dòng)態(tài)生成的元素的時(shí)候也是獲取不到的,因?yàn)榫W(wǎng)頁只會(huì)執(zhí)行一次初始化綁定,之后動(dòng)態(tài)生成的dom元素也是監(jiān)測不到的。
2. 解決辦法:
(1)在每一個(gè)動(dòng)態(tài)生成的地方都再綁定多一次事件,比如這個(gè)博客里面的例子
(2)把bind改用live,因?yàn)閘ive是實(shí)時(shí)監(jiān)測的,對于新增的dom元素也是有效的(因?yàn)椴粩嗳ソ壎?、判斷,所以可能?huì)影響Web性能問題)
(3)把bind改用delegate,因?yàn)閐elegate是實(shí)時(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里面動(dòng)態(tài)生成的刪除按鈕,幫刪除按鈕綁定刪除時(shí)間,可是刪除事件失效,因?yàn)閯h除按鈕是動(dòng)態(tài)生成的,初始化事件綁定的時(shí)候,獲取到的table里面的button已經(jīng)是空的,所以綁定的一直都是空元素,所以點(diǎn)擊button按鈕的時(shí)候一直沒有反應(yīng)。
4. 最后的解決辦法:先獲取table,然后再綁定table的click事件(因?yàn)閠able是在原本已經(jīng)存在的dom元素),然后當(dāng)點(diǎn)擊事件觸發(fā)的時(shí)候再捕獲事件的target(比如點(diǎn)擊table里面的button,這個(gè)時(shí)候因?yàn)橐呀?jīng)動(dòng)態(tài)生成button并append進(jìn)去table里面了,所以button是存在的,此時(shí)target指的是button),然后再進(jìn)行相應(yīng)的操作。
注意:在這里注意兩個(gè)問題:
(1)table里面的元素是已經(jīng)添加進(jìn)入table里面了的,所以點(diǎn)擊那個(gè)button的時(shí)候,e.target獲取到的就是button
(2)為什么已經(jīng)將button這些元素添加進(jìn)入table里面,可是還是沒能獲取到呢,因?yàn)槭莍nit()這個(gè)函數(shù)初始化的時(shí)候獲取table里面的button,可是此時(shí)還未進(jìn)行任何操作,所以獲取到的就是空,所以沒綁定任何元素。
上面需要注意的兩個(gè)問題要分清楚,這個(gè)是問題的關(guān)鍵。
5.關(guān)于bind:每次綁定事件之后事件會(huì)一直綁定著,除非用unbind解綁之后再重新綁定,要不然事件會(huì)一直存在,所以這就是為什么在做項(xiàng)目的時(shí)候,有時(shí)候ajax請求的結(jié)果會(huì)出現(xiàn)1,2,4,8這樣疊加,是因?yàn)槿绻昧薭ind,每次觸發(fā)事件都會(huì)綁定一次操作,所以觸發(fā)第一次的時(shí)候,ajax請求一次;第二次的時(shí)候,ajax請求1+1=2次;第三次就是1+2+1=4次;第四次就是1+2+4+1=8次,以此類推。所以如果利用bind綁定事件的話,要先unbind解綁元素原本有的事件再綁定事件,才不會(huì)導(dǎo)致ajax請求多次。
以上這篇關(guān)于動(dòng)態(tài)生成dom綁定事件失效的原因及解決方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery實(shí)現(xiàn)點(diǎn)擊關(guān)注和取消功能
點(diǎn)贊,網(wǎng)絡(luò)用語,表示“贊同”、“喜愛”。今天小編通過實(shí)例代碼給大家分享jQuery實(shí)現(xiàn)點(diǎn)擊關(guān)注和取消功能,需要的朋友參考下吧2017-07-07基于Jquery的$.cookie()實(shí)現(xiàn)跨越頁面tabs導(dǎo)航實(shí)現(xiàn)代碼
基于Jquery的$.cookie()實(shí)現(xiàn)跨越頁面tabs導(dǎo)航實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-03-03在easyUI開發(fā)中,出現(xiàn)jquery.easyui.min.js函數(shù)庫問題的解決辦法
easyUI是jquery的一個(gè)插件,是民間的插件,easyUI使用起來很方便,里面有網(wǎng)頁制作的最重要的三大方塊:javascript代碼、html代碼和Css樣式,但是很容易出現(xiàn)jquery.easyui.min.js函數(shù)庫問題,小編教大家如何解決問題,需要的朋友可以參考下2015-09-09jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)滾動(dòng)的動(dòng)感菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)滾動(dòng)的動(dòng)感菜單效果,可實(shí)現(xiàn)鼠標(biāo)滑過菜單項(xiàng)呈現(xiàn)文字上下滑動(dòng)變換的效果,涉及jQuery頁面元素樣式的動(dòng)態(tài)設(shè)置技巧,需要的朋友可以參考下2015-09-09jQuery中ajax的相關(guān)知識點(diǎn)匯總
這篇文章主要給大家介紹了關(guān)于jQuery中ajax相關(guān)知識點(diǎn)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03jquery動(dòng)態(tài)添加以及遍歷option并獲取特定樣式名稱的option方法
下面小編就為大家分享一篇jquery動(dòng)態(tài)添加以及遍歷option并獲取特定樣式名稱的option方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01