您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

jQuery 給 Ajax 動態生成的 li 綁定 click 事件：事件委托（on/delegate）完整指南

編輯：程式設計綜合問答

問題根因

$("#uu li").click(...) 是**直接綁定**，僅對**當前存在**的 li 生效。Ajax 追加的新 li 並未綁定處理函數。

解決方案：事件委托

jQuery 1.7+ 推薦：.on()

// 綁定在 靜態父元素 或 document 上
$("#uu").on("click", "li", function() {
    alert(123);
    // $(this) 是被點擊的 li
    $("#txtCode").val($(this).text());
    $("#divShowText").html("");
});

jQuery 1.4.3 - 1.6：.delegate()

$("#uu").delegate("li", "click", function() {
    // 邏輯同 .on()
});

原生 JavaScript（現代項目無 jQuery 依賴）

document.getElementById('uu').addEventListener('click', function(e) {
    const li = e.target.closest('li');  // 向上查找最近的 li
    if (li && li.parentNode === this) { // 確保是直系子元素
        alert(123);
        document.getElementById('txtCode').value = li.textContent;
        document.getElementById('divShowText').innerHTML = '';
    }
});

原理圖解

事件冒泡流向：
li (動態) → ul#uu (靜態) → body → document → window

委托綁定在 ul#uu：
1. 用戶點擊 li
2. 事件冒泡到 ul#uu
3. ul#uu 的處理函數觸發
4. 判斷 e.target 是否匹配選擇器 "li"
5. 匹配 → 執行回調，this 指向 li

注意事項

場景	處理
動態添加的父容器也可能被替換	委托綁定在 `document` 或 `body` 上：`$(document).on("click", "#uu li", fn)`（性能略降）
需要阻止冒泡	回調中 `e.stopPropagation()`，但不影響委托捕獲（已冒泡到委托節點）
需要移除委托	`$("#uu").off("click", "li")` 或 `$(document).off("click", "#uu li")`
多層嵌套列表	選擇器精確化：`"#uu > li"` (僅直系子代) 或 `"#uu li:not(#uu li li)"`

性能對比

直接綁定：N 個元素 → N 個處理函數引用，內存 O(N)，新增元素需重新綁定。
事件委托：1 個父元素 → 1 個處理函數，內存 O(1)，自動覆蓋所有當前/未來子元素。**強烈推薦用於列表、表格、動態表單**。

總結

Ajax 動態生成元素綁定事件，**必須使用事件委托**。jQuery 用 $("#staticParent").on("event", "dynamicSelector", handler)，原生用 parent.addEventListener('event', e => { if(e.target.matches('selector')) ... })。一勞永逸，內存高效，代碼簡潔。