javascript - 使用 Javascript+JQuery 访问自动生成的表中的行

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 7 年前。

我是 JQuery 新手。我有两个表:table1 在 HTML 中硬编码，table2 是使用 javascript 从 csv 文件加载的数组生成的。显示第二个表后，我想突出显示(并稍后处理)用户使用 JQuery 单击的行。下面是简化的代码。

硬编码表:

<table id="table1">
    <tr> <td>cell1</td><td>cell2</td><td>cell3</td> </tr>
    <tr> <td>cell4</td><td>cell5</td><td>cell6</td> </tr>
</table>

从 id 为“data”的数组生成表(工作正常):

<script type="text/javascript">
function createTable(){
    var content = "";
    data.forEach (function(row){
        content += "<tr>";
        row.forEach (function(cell)
            { content += "<td>" + cell + "</td>"; });
        content += "</tr>"; });
    document.getElementById("table2").innerHTML = content; }
</script>

JQuery 脚本对表中的行执行任何操作，例如单击一行时显示警报:

<script>
$("tr").click(function()
{
    alert("do something"); 
}); 
</script>

此代码不适用于生成的 table2。仅当我尝试突出显示整个表格(使用 $("table") )时它才起作用，但当我尝试突出显示其任何元素(tr，td)时它不起作用。它非常适合硬编码的 table1。

我尝试使用不同的元素，例如 $("#table2 :td") , $("#table2 td")等等但都无济于事。为什么我可以访问整个表但不能访问其元素？

Answer 1

您需要动态生成的元素的事件委托(delegate)。请尝试如下所示。

$('body')on('click', 'tr', function() {
    alert("do something"); 
});