關(guān)于動態(tài)生成dom綁定事件失效的原因及解決方法
之前做項目都是直接用jquery的bind綁定事件,不過當(dāng)時都不是動態(tài)生成dom元素,而是已經(jīng)頁面中原本存在的dom元素進行事件綁定,最近在測試給動態(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)生成的元素的時候也是獲取不到的,因為網(wǎng)頁只會執(zhí)行一次初始化綁定,之后動態(tài)生成的dom元素也是監(jiān)測不到的。
2. 解決辦法:
(1)在每一個動態(tài)生成的地方都再綁定多一次事件,比如這個博客里面的例子
(2)把bind改用live,因為live是實時監(jiān)測的,對于新增的dom元素也是有效的(因為不斷去綁定、判斷,所以可能會影響Web性能問題)
(3)把bind改用delegate,因為delegate是實時監(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)生成的刪除按鈕,幫刪除按鈕綁定刪除時間,可是刪除事件失效,因為刪除按鈕是動態(tài)生成的,初始化事件綁定的時候,獲取到的table里面的button已經(jīng)是空的,所以綁定的一直都是空元素,所以點擊button按鈕的時候一直沒有反應(yīng)。
4. 最后的解決辦法:先獲取table,然后再綁定table的click事件(因為table是在原本已經(jīng)存在的dom元素),然后當(dāng)點擊事件觸發(fā)的時候再捕獲事件的target(比如點擊table里面的button,這個時候因為已經(jīng)動態(tài)生成button并append進去table里面了,所以button是存在的,此時target指的是button),然后再進行相應(yīng)的操作。
注意:在這里注意兩個問題:
(1)table里面的元素是已經(jīng)添加進入table里面了的,所以點擊那個button的時候,e.target獲取到的就是button
(2)為什么已經(jīng)將button這些元素添加進入table里面,可是還是沒能獲取到呢,因為是init()這個函數(shù)初始化的時候獲取table里面的button,可是此時還未進行任何操作,所以獲取到的就是空,所以沒綁定任何元素。
上面需要注意的兩個問題要分清楚,這個是問題的關(guān)鍵。
5.關(guān)于bind:每次綁定事件之后事件會一直綁定著,除非用unbind解綁之后再重新綁定,要不然事件會一直存在,所以這就是為什么在做項目的時候,有時候ajax請求的結(jié)果會出現(xiàn)1,2,4,8這樣疊加,是因為如果用了bind,每次觸發(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)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
基于Jquery的$.cookie()實現(xiàn)跨越頁面tabs導(dǎo)航實現(xiàn)代碼
基于Jquery的$.cookie()實現(xiàn)跨越頁面tabs導(dǎo)航實現(xiàn)代碼,需要的朋友可以參考下。2011-03-03在easyUI開發(fā)中,出現(xiàn)jquery.easyui.min.js函數(shù)庫問題的解決辦法
easyUI是jquery的一個插件,是民間的插件,easyUI使用起來很方便,里面有網(wǎng)頁制作的最重要的三大方塊:javascript代碼、html代碼和Css樣式,但是很容易出現(xiàn)jquery.easyui.min.js函數(shù)庫問題,小編教大家如何解決問題,需要的朋友可以參考下2015-09-09jQuery實現(xiàn)響應(yīng)鼠標(biāo)滾動的動感菜單效果
這篇文章主要介紹了jQuery實現(xiàn)響應(yīng)鼠標(biāo)滾動的動感菜單效果,可實現(xiàn)鼠標(biāo)滑過菜單項呈現(xiàn)文字上下滑動變換的效果,涉及jQuery頁面元素樣式的動態(tài)設(shè)置技巧,需要的朋友可以參考下2015-09-09jquery動態(tài)添加以及遍歷option并獲取特定樣式名稱的option方法
下面小編就為大家分享一篇jquery動態(tài)添加以及遍歷option并獲取特定樣式名稱的option方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01