理解事件委託演進史，避免使用已棄用 API

.live() 是 jQuery 1.3 引入、1.7 棄用、1.9 移除的事件委託方法。雖然歷史代碼中仍可見，但現代開發應使用 .on()。本文解析其原理、用法及遷移路徑。

live() 核心機制

// 綁定：為所有當前及未來 .clickme 元素綁定 click
$('.clickme').live('click', function() {
    alert("Live handler called.");
});

// 動態添加元素
$('body').append('<button class="clickme">Another target</button>');
// 新元素無需重新綁定，自動生效

實現原理

• 將事件綁定在 document（或指定 context）根節點上。
• 事件冒泡到根節點時，檢查 event.target 是否匹配選擇器 .clickme。
• 匹配則執行處理函數，this 指向匹配元素。

主要缺陷（導致棄用原因）

1. 性能差：所有事件冒泡至 document 才處理，深層 DOM 樹開銷大。
2. 選擇器限制：不支持複雜選擇器、遍歷方法（如 .find()、.children()）。
3. stopPropagation 失效：下游調用 event.stopPropagation() 會阻斷冒泡，導致 live 失效。
4. 鏈式調用破壞：返回 jQuery 對象但未真正綁定在元素上，語義混淆。

現代替代：.on() 委託寫法

// 推薦：綁定在最近的靜態父容器上
$('#staticContainer').on('click', '.clickme', function() {
    alert("Delegated handler called.");
});

// 等價於舊版 delegate()
$(document).delegate('.clickme', 'click', function() { ... }); // 1.7+ 內部轉向 .on()

// 直接綁定（僅針對現有元素，動態新增無效）
$('.clickme').on('click', function() { ... });

遷移清單

舊代碼	新代碼
$(sel).live(event, fn)	$(document).on(event, sel, fn)
$(sel).die(event, fn)	$(document).off(event, sel, fn)
$(sel).delegate(sub, event, fn)	$(sel).on(event, sub, fn)
$(sel).undelegate(sub, event, fn)	$(sel).off(event, sub, fn)

最佳實踐

• 優先綁定在「最近的靜態祖先元素」而非 document，減少冒泡路徑。
• 動態內容容器確定時（如 AJAX 列表容器 #list），用 $('#list').on('click', '.item', fn)。
• 使用 event delegation 替代循環綁定，節省內存、自動覆蓋動態元素。

理解演進脈絡，編寫面向未來的高性能事件綁定代碼。