jQuery on() 无法正常使用表

Question

我正在尝试创建一个动态构建表格的页面。我知道当您动态添加元素时，您需要使用 .on() 方法。我过去用 live 做过这个，但我似乎无法让它工作。我有一个表，当页面加载 1 行并且点击有效时构建，但是当我运行添加新行的功能时，当我点击它时没有任何反应。有人可以帮忙吗？

这是函数

$("#dataTable tbody tr").on("click", "a", function() {
    alert("test");
});

这是加载时创建的表。

<table id="dataTable" width="80%" align="center">
    <thead>
        <tr>
            <th>Action</th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id ="123"><a id="123" href="#">Delete</a></td>
            <td>test</td>
            <td>test2</td>
        </tr>
    </tbody>
</table>

这是 ajax 调用添加到表中的行

var addRow = "<tr id="+id+"><td><a href='#' id="+id+" class='rowDel'>Delete</a></td><td>"+fName+"</td><td>"+lName+"</td></tr>";
$("#dataTable").append(addRow);

知道为什么它不起作用吗？

提前致谢。

Answer 1

事件委托(delegate)的目标元素应该是静态元素:

$("#dataTable tbody").on("click", "tr a", function() {
     alert("test");
});