AJAX加载动态表格后，编辑图标点击事件绑定失效问题解决

我编写了一段代码用于从设备表获取数据，并在JavaScript创建的表格中展示，代码运行正常，但想为class为"edit"且带有对应devise_id的图标声明点击事件时，测试用的$("#val.devise_id").click(function() { console.log("yes"); });完全无效，我认为是ID绑定的问题，该如何修复？

原代码片段：

$(document).ready(function() { 
    var tableresponsive = $("#table-responsive");
    tableresponsive.text("Loading data from JSON source...");
    $.ajax({ 
        type: "GET", 
        url: "url to get all devise ", 
        success: function(result) { 
            var output = "<table class=\"table table-hover mb-0\"><thead><tr><th>ID</th><th>Devise</th><th>Symbole</th><th>Taux de change </th><th width=\"110\">Actions</th></tr></thead><tbody>";
            $.each(result.records, function(key, val) { 
                output+=` <tr> 
                <td>` + val.devise_id + `</td> 
                <td>` + val.devise_name + `</td> 
                <td>` + val.symbole + `</td> 
                <td>` + val.taux_de_change + `</td> 
                <!-- 'action' buttons --> 
                <td class="td-actions"><a href="update_devise.html?id=` + val.devise_id + `"><i class="la la-edit edit"></i></a><a id="`+val.devise_id+`" ><i class="la la-close delete"></i></a></td> 
                </tr>`;
                $("#val.devise_id").click(function() { 
                    console.log("yes"); 
                }); 
            }); 
            output += "</tbody></table>"; 
            tableresponsive.html(output); 
        } 
    }); 
});

问题分析 #

你遇到的核心问题有两个：

1. 动态元素无法直接绑定事件：这些编辑按钮是通过AJAX请求后动态生成的，页面初始加载时它们并不存在，普通的.click()绑定找不到对应的DOM节点。
2. 选择器写法错误：$("#val.devise_id")会被jQuery解析为寻找ID字面量为val.devise_id的元素，而不是把val.devise_id作为变量拼接成动态ID。

修复方案 #

方案1：事件委托（推荐） #

利用事件冒泡机制，把事件绑定到页面加载时就存在的父元素上，这样后续动态生成的子元素也能触发事件。这种方法灵活且不需要重复绑定，是处理动态元素事件的最优解。

修改后的完整代码：

$(document).ready(function() { 
    var tableresponsive = $("#table-responsive");
    tableresponsive.text("Loading data from JSON source...");

    // 事件委托：绑定到已存在的父容器#table-responsive
    $("#table-responsive").on("click", ".edit", function() {
        // 通过data属性获取devise_id，比从href解析更清晰
        var deviseId = $(this).closest("a").data("id");
        console.log("点击编辑按钮，devise_id：", deviseId);
        // 这里可以添加你的编辑逻辑
    });

    $.ajax({ 
        type: "GET", 
        url: "url to get all devise ", 
        success: function(result) { 
            var output = "<table class=\"table table-hover mb-0\"><thead><tr><th>ID</th><th>Devise</th><th>Symbole</th><th>Taux de change </th><th width=\"110\">Actions</th></tr></thead><tbody>";
            $.each(result.records, function(key, val) { 
                // 给a标签添加data-id属性，方便后续获取ID
                output+=` <tr> 
                <td>` + val.devise_id + `</td> 
                <td>` + val.devise_name + `</td> 
                <td>` + val.symbole + `</td> 
                <td>` + val.taux_de_change + `</td> 
                <td class="td-actions">
                    <a href="update_devise.html?id=` + val.devise_id + `" data-id="`+val.devise_id+`"><i class="la la-edit edit"></i></a>
                    <a data-id="`+val.devise_id+`"><i class="la la-close delete"></i></a>
                </td> 
                </tr>`;
            }); 
            output += "</tbody></table>"; 
            tableresponsive.html(output); 
        } 
    }); 
});

方案2：动态生成后绑定事件 #

如果你不想用事件委托，也可以在元素插入DOM后再逐个绑定事件，但这种方法需要每次更新表格后都重新绑定，灵活性较差：

$(document).ready(function() { 
    var tableresponsive = $("#table-responsive");
    tableresponsive.text("Loading data from JSON source...");
    
    $.ajax({ 
        type: "GET", 
        url: "url to get all devise ", 
        success: function(result) { 
            var output = "<table class=\"table table-hover mb-0\"><thead><tr><th>ID</th><th>Devise</th><th>Symbole</th><th>Taux de change </th><th width=\"110\">Actions</th></tr></thead><tbody>";
            $.each(result.records, function(key, val) { 
                // 给编辑按钮的a标签添加带前缀的ID，避免纯数字ID的合法性问题
                output+=` <tr> 
                <td>` + val.devise_id + `</td> 
                <td>` + val.devise_name + `</td> 
                <td>` + val.symbole + `</td> 
                <td>` + val.taux_de_change + `</td> 
                <td class="td-actions">
                    <a href="update_devise.html?id=` + val.devise_id + `" id="edit-`+val.devise_id+`"><i class="la la-edit edit"></i></a>
                    <a id="delete-`+val.devise_id+`"><i class="la la-close delete"></i></a>
                </td> 
                </tr>`;
            }); 
            output += "</tbody></table>"; 
            tableresponsive.html(output);

            // 元素插入DOM后再绑定事件
            $(".edit").each(function() {
                var deviseId = $(this).closest("a").attr("id").split("edit-")[1];
                $(this).click(function() {
                    console.log("点击编辑，devise_id：", deviseId);
                });
            });
        } 
    }); 
});

内容的提问来源于stack exchange，提问作者user3623368