jQuery 新手常見問題：動態綁定事件與數據傳遞至編輯頁面

問題背景

在使用 jQuery 進行前端開發時，新手常遇到兩個典型問題：一是透過 AJAX 動態載入的表格中，按鈕的點擊事件無法正常綁定；二是點擊「編輯」按鈕時，如何將該行的數據（如 ID）傳遞給編輯頁面。

原始代碼分析

$(function(){
    load();
    $(".edit").bind('click',function(){
        location.href="edit.jsp";
    });
});

function load(){
    $.ajax({
        url:"StaffServlet",
        type:"post",
        data:{"action":"list"},
        dataType:"json",
        success:function(data){
            var data=eval(data);
            var obj="<tr><td>編號</td><td>姓名</td><td>職位</td><td>電話</td><td>電子郵件</td><td>編輯</td><td>刪除</td></tr>";
            for(var i=0;i<data.length;i++){
                var tr="<tr>"+"<td>"+data[i].id+"</td>"+"<td>"+data[i].name+"</td>"+"<td>"+data[i].job+"</td>"+"<td>"+data[i].phone+"</td>"+"<td>"+data[i].email+"</td>" 
                     +"<td><input type='button' class='edit' value='編輯'></td>"
                     +"<td><input type='button' class='remove' value='刪除'></td>"+"</tr>";
                obj+=tr;
            }
            $("#list").html(obj);
        }
    });
}

$(".remove").click(function(){
    var id=$(this).prev().val();
    $.ajax({
        type:"post",
        url:"StaffServlet",
        data:"action=remove&id="+id,
    });
});

核心問題

1. 事件綁定失效：`$(".edit").bind(...)` 和 `$(".remove").click(...)` 在頁面載入時執行，但表格行是透過 AJAX 異步載入後動態生成的，這時候綁定的事件無法作用於後來新增的元素。
2. 編輯頁面數據傳遞：點擊編輯按鈕跳轉到 `edit.jsp` 時，未攜帶當前行的標識（如 ID），導致編輯頁面無法知道要編輯哪條記錄。

解決方案

1. 使用事件委託綁定動態元素

將事件綁定在靜態的父元素（如 `document` 或 `#list`）上，利用事件冒泡機制處理動態新增的按鈕：

// 編輯按鈕事件委託
$("#list").on("click", ".edit", function(){
    var id = $(this).closest("tr").find("td:first").text(); // 獲取第一列 ID
    location.href = "edit.jsp?id=" + id; // 通過 URL 參數傳遞
});

// 刪除按鈕事件委託
$("#list").on("click", ".remove", function(){
    var id = $(this).closest("tr").find("td:first").text();
    $.ajax({
        type: "post",
        url: "StaffServlet",
        data: { action: "remove", id: id },
        success: function(response){
            // 可選：刪除成功後刷新表格或移除該行
            load();
        }
    });
});

2. 確保數據載入後再綁定（若不使用委託）

若堅持直接綁定，必須在 AJAX 成功回調中、DOM 更新後執行綁定，並將 AJAX 設為同步（`async: false`），但強烈不推薦，因為同步請求會阻塞瀏覽器主線程，導致頁面假死。現代開發應優先使用事件委託或 Promise/async-await 處理異步流程。

3. 編輯頁面接收參數

在 `edit.jsp` 中可通過 `request.getParameter("id")` 獲取 ID，再查詢數據庫回顯數據。

最佳實踐總結

• 動態生成的元素請使用 .on() 事件委託綁定事件。
• 跳轉編輯頁面時，將主鍵 ID 作為 URL 參數傳遞。
• 避免使用 `async: false` 同步 AJAX，改用回調或 Promise 鏈式調用。
• 刪除操作建議在 AJAX 成功後重新載入列表或直接操作 DOM 移除該行。

掌握這些技巧，能有效解決 jQuery 開發中常見的動態綁定與數據傳遞問題。