为什么click()不能用于附加元素

Why click() does not work for appended elements?

本文关键字：元素 用于 不能 click 为什么      更新时间：2023-09-26

我有一个<td>，当我点击它时，它会显示一个警告，其中包含以下消息:点击

我的问题是，当我附加一个新的<td>，然后当我点击它，我没有看到任何警报。为什么?如何为附加元素设置event ?

这是一个小提琴，解释了我所说的。

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');
});

使用on委托点击事件

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

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

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

由于您是在脚本中创建这些元素，因此您还有另一个选择，即在将它们附加到页面之前为它们分配处理程序。

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

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

相关文章：