修改QC檢查站,新增效期檢查功能,因需要在動態產生的產品品項加上效期檢查鈕,每次動態產生的項目都要為按鈕元素綁定
觸發ajax檢查效期事件,原先的作法是每次動態產生的同時,為該元素綁定一次事件,品項有幾項就要做相同的綁定次數,後來在網路上看到另外一種寫法,利用DOM事件會由子元素一路向父元素Bubble Up的特性,在document或特定元素統一掛上事件函數，事件被觸發時再透過選擇器比對事件目標元素是否吻合，決定要不要執行事件邏輯，藉此提升效率，同時還能將"未來才會產生的元素"也納入事件的涵蓋範圍,以下是範例:
$(document).ready(function () {
//原先的寫法:
$("td").bind("click", function(){
$(this).toggleClass("click");
});
//事件委託:
$("table").delegate("td","click", function(){
$(this).toggleClass("click");
});
})
在這邊利用事件冒泡的特性,藉由頁面載入完成的同時對父元素作事件委託處理,接下來不管產生幾個動態元素,都可以透過事件監聽判斷該函式是否該執行,原先如果動態產生一百個品項就要綁定一百次的事件,只要頁面載入完成後一次就完成,達到有效率的寫法!!