Question

我有一个<td>当我点击它时，它会显示一条包含此消息的提醒：点击

我的问题是当我添加新的<td>时，当我点击它时，我看不到任何警报。为什么？如何为附加元素设置事件？

Here是解释我所说的内容的小提琴。

HTML：

<table> <tr class = 'test'> <td> old </td> </tr> </table>
<br><br>
<div class ='addnewrow'>append new row</div>

CSS：

.addnewrow{
    border:2px solid;
    padding: 4px;
    text-align: center;
    cursor: pointer;
}

td{
    cursor: pointer;
}

JS：

$(".addnewrow").click(function(){
$("table").append('<tr><td>new</td></tr>');
});

$("td").click(function(){
alert('clicked');
});

Answer 1

使用on委派点击事件。

$("body").on("click","td",function(){
    alert('clicked');
});

这将从父元素为“body”且其目标为“td”的元素中获取单击事件，然后使用回调函数。此委派过程检查每个点击事件，并在事件发生时完成。

您在问题中显示的点击过程只会在执行时分配一次事件。因此，当时只有“td”匹配才会收到事件处理程序。

由于您在脚本中创建这些元素，因此您可以在将它们附加到页面之前为其分配处理程序。

$(".addnewrow").click(function(){
    var row = $("<tr><td>new</td></tr>");
    $("td",row).click(function(){
        alert("clicked");
    });
    $("table").append(row);
});

这取决于页面上发生的其他方法最适合哪种方式。

为什么click（）不适用于附加元素？

1 个答案: