jQuery AJAX 動態生成的按鈕綁定點擊事件失效？使用事件委派

問題場景

透過 $.post 取得資料後動態拼接 HTML 字串 append 到 tbody，新增的「修改/刪除」按鈕綁定 click 無反應。

根本原因

$("#Delete").click(...) 在 DOM 就緒時執行，只綁定當時存在的元素。動態新增的元素不在綁定範圍內。

解決方案：事件委派

寫法一：委派到靜態父層 (推薦)

$('#tbody').on('click', '#Delete', function() {
    var rowData = $(this).closest('tr').find('td:last').data('data');
    alert('刪除: ' + rowData.record_title);
    // location.href = "Delete.html?id=" + rowData.id;
});

$('#tbody').on('click', '#Change', function() {
    var rowData = $(this).closest('tr').find('td:last').data('data');
    alert('修改: ' + rowData.record_title);
});

寫法二：AJAX 成功回調中重新綁定 (不推薦，易重複綁定)

success: function(result) {
    // ... append html ...
    // 先解綁再綁定
    $('#tbody').off('click', '#Delete').on('click', '#Delete', function(){ ... });
}

完整優化範例

$(function() {
    // 1. 靜態按鈕直接綁定
    $("#ADD, #Back, #add").on('click', function(){ ... });

    // 2. 動態按鈕使用委派
    $('#tbody').on('click', '.btn-delete', function() {
        var $tr = $(this).closest('tr');
        var data = $tr.find('td:last').data('data');
        if (confirm('確定刪除 ' + data.record_title + '?')) {
            $.post('delete.do', {id: data.id}, function(res){ ... });
        }
    });

    $('#tbody').on('click', '.btn-edit', function() {
        var data = $(this).closest('tr').find('td:last').data('data');
        location.href = "Edit.html?id=" + data.id;
    });

    // 3. 載入資料
    loadData();
});

function loadData() {
    $.post(base_path + "/record/find.do", function(result) {
        if (result.success) {
            var html = '';
            $.each(result.data, function(i, item) {
                html += '<tr>'
                    + '<td>' + item.record_title + '</td>'
                    + '<td>' + item.record_time + '</td>'
                    + '<td>' + item.record_man + '</td>'
                    + '<td>' + item.record_content + '</td>'
                    + '<td>' + item.record_comment + '</td>'
                    + '<td>'
                    + '  <button class="btn-edit">修改</button>'
                    + '  <button class="btn-delete">刪除</button>'
                    + '</td></tr>';
                // 資料存在最後一個 td 的 data 中
            });
            $('#tbody').html(html).find('td:last').each(function(i) {
                $(this).data('data', result.data[i]);
            });
        }
    });
}

關鍵點

• 使用 class 而非 id 標識動態按鈕（id 必須唯一）。
• 委派目標選存在頁面載入時就存在的父容器（如 #tbody 或 document）。
• 資料儲存於 .data() 而非 HTML 屬性，避免 XSS 與型別問題。