不會過多介紹 jQuery source code 如何去綁定事件.
發生情境 :
隨著動態產生的 DOM,
我們會重新賦予新的觸發事件,
此時會原有的 DOM 會在賦予新事件, 進而出現重複綁定的狀況.
這邊將舉個簡單範例 ( http://jsfiddle.net/k4Cjg/ ) :
點選 "Click this Link" 會在上方的 <textarea></textarea> 加入 This is demo 字段.
點選 "產生" 則會產生新的連結並且賦予同樣的事件.
新的 Click this Link 則一樣會加入字段, 但是點舊的則會加入 2 次字段 ?
這是因為舊的元素又再次被賦予 click 事件,
所以使用者點只點 1 次, 但是實際上卻是執行 2 次.
大家可以前往範例產生越多按鈕再點選一開始產生的 Click this Link 就能感受到了.
解決方法 :
之前解法是使用 unbind('click') 然後又在榜定一次 click 事件就能解決了.
但是一段時間回來看的時候反而忘記為什麼要寫成 unbind('click').bind('click) ...
這邊提供更簡單的解決方法, 就是使用 on() 去賦予事件 ( http://api.jquery.com/on/ )
雖然工作上我都是使用 on 去賦予事件, 但是我一直沒有研究 on 跟 bind 有何不同 ...
我們先看看 on 的使用方式吧 !
events 事件, [selector 子選擇器], [data 傳值], handler
.on( events [, selector ] [, data ], handler )
請看修改過後的範例 ( http://jsfiddle.net/k4Cjg/1/ )
使用 selector 選擇器去賦予事件,
可以看到我們綁定的是 id="wrap" 元素,
裡面所有 class="item"都會觸發我們事先寫好的 function,
所以之後無論怎麼動態產生元素,
只要是 id="wrap" 元素沒被改變過, 裡面所有 class="item" 都會觸發相同的事件.
後記 :
Question - 為什麼要特別標註紅字 ?
Answer - 因為現在手邊的工作有使用到 Ajax 去刷新某個 <div></div>, 但是基於不想每次刷新都在去執行 js 賦予事件, 所以使用這個方式可以就不用讓新的 DOM 去賦予事件, 這邊要強調的是最外層賦予事件的 DOM 不能被改變 ( Ajax 刷掉 ) , 不然還是得在刷掉後去重新賦予事件.
沒有留言:
張貼留言