jQuery 動態添加元素事件綁定失效：事件委托與重新綁定解決方案

問題現象

通過 $.ajax 或 append() 動態插入 HTML 菜單，原有 click 事件不生效；直接寫在頁面的同樣菜單正常工作。

根本原因

$(selector).click(fn) / .on('click', fn) **僅綁定當前已存在的元素**。動態創建的元素不在初始綁定集合中，故無事件處理器。

解決方案

方案一：事件委托（推薦）

// 綁定到靜態父容器（如 document、body 或最近不動的祖先）
$(document).on('click', '.menu-item', function() {
    // this 指向觸發的 .menu-item 元素
    $(this).next('.sub-menu').slideToggle();
});

• 原理：事件冒泡到 document，jQuery 判斷目標是否匹配選擇器。
• 優點：一次綁定，永久生效，內存占用極低。

方案二：插入後重新綁定

$('#container').append(htmlString);
// 重新綁定
$('#container .menu-item').off('click').on('click', function() { ... });

• 缺點：需每次插入後調用，易漏綁；若同元素多次綁定需先 .off() 防重複。

方案三：HTML 中內聯 onclick（不推薦）

var html = '<a onclick="toggleMenu(this)">菜單</a>';

• 污染全局命名空間，內容安全策略 (CSP) 可能阻擋，調試困難。

最佳實踐總結

1. 優先使用 事件委托：$(staticParent).on(event, dynamicSelector, handler)。
2. 靜態父容器越近越好（如固定的 #menu-container），減少冒泡路徑。
3. 避免在循環中重複綁定，善用 .off() 清理舊綁定。