之前做項目都是直接用jquery的bind綁定事件，不過當時都不是動態生成dom元素，而是已經頁面中原本存在的dom元素進行事件綁定，最近在測試給動態生成的dom綁定事件的時候發現事件失效，於是就測試了一下：
1. 事件失效的原因：
（1）bind事件綁定只對dom中存在的元素有效，對於我們後來動態增加的元素是監測不到，所以綁定不了
（2）同樣，當你使用var aa = document.getElementsByTagName("動態生成的元素");來獲取動態生成的元素的時候也是獲取不到的，因為網頁只會執行一次初始化綁定，之後動態生成的dom元素也是監測不到的。
2. 解決辦法：
（1）在每一個動態生成的地方都再綁定多一次事件，比如這個博客裡面的例子
（2）把bind改用live，因為live是實時監測的，對於新增的dom元素也是有效的（因為不斷去綁定、判斷，所以可能會影響Web性能問題）
（3）把bind改用delegate，因為delegate是實時監測的。
（4）在jquery1.7 起版本用on替代了bind()、live() 和delegate() 方法。
3. 關於最近遇到的事件失效的原因：在原本的網頁中（代碼可見https://github.com/UFOwl/ife/tree/master/stage02/task16），我想要獲取table裡面動態生成的刪除按鈕，幫刪除按鈕綁定刪除時間，可是刪除事件失效，因為刪除按鈕是動態生成的，初始化事件綁定的時候，獲取到的table裡面的button已經是空的，所以綁定的一直都是空元素，所以點擊button按鈕的時候一直沒有反應。
4. 最後的解決辦法：先獲取table，然後再綁定table的click事件（因為table是在原本已經存在的dom元素），然後當點擊事件觸發的時候再捕獲事件的target（比如點擊table裡面的button，這個時候因為已經動態生成button並append進去table裡面了，所以button是存在的，此時target指的是button），然後再進行相應的操作。
注意：在這裡註意兩個問題：
（1）table裡面的元素是已經添加進入table裡面了的，所以點擊那個button的時候，e.target獲取到的就是button
（2）為什麼已經將button這些元素添加進入table裡面，可是還是沒能獲取到呢，因為是init()這個函數初始化的時候獲取table裡面的button，可是此時還未進行任何操作，所以獲取到的就是空，所以沒綁定任何元素。
上面需要注意的兩個問題要分清楚，這個是問題的關鍵。
5.關於bind：每次綁定事件之後事件會一直綁定著，除非用unbind解綁之後再重新綁定，要不然事件會一直存在，所以這就是為什麼在做項目的時候，有時候ajax請求的結果會出現1,2,4,8這樣疊加，是因為如果用了bind，每次觸發事件都會綁定一次操作，所以觸發第一次的時候，ajax請求一次；第二次的時候，ajax請求1+1=2次；第三次就是1+2+1=4次；第四次就是1+2+4+1=8次，以此類推。所以如果利用bind綁定事件的話，要先unbind解綁元素原本有的事件再綁定事件，才不會導致ajax請求多次。
以上這篇關於動態生成dom綁定事件失效的原因及解決方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。