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

我有一个

，当我点击它时，它会显示一条警告信息：clicked

我的问题是，当我添加一个新的

时，当我单击它时，我没有看到任何警报。为什么？如何设置附加元素的事件

是一把解释我所说的话的小提琴

HTML:

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

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

td{
    cursor: pointer;
}

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

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

JS:

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

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

td{
    cursor: pointer;
}

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

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

$（.addnewrow”）。单击（函数（）{
$（“表格”）。追加（“新”）；
});
$（“td”）。单击（函数（）{
警报（“点击”）；
});

使用上的委派单击事件

$("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);
});

$（.addnewrow”）。单击（函数（）{
var行=$（“新”）；
$（“td”，第行）。单击（函数（）{
警报（“点击”）；
});
$（“表格”）。追加（第行）；
});

---

这取决于页面上还发生了什么，哪种方法最合适。

最后一个函数将单击处理程序分配给当前存在的所有td。如果您稍后添加td，您将需要再次调用该函数。是的，它不会显示，因为当您将click处理程序分配给td元素时，您附加的td元素还不存在。您再次将处理程序附加到所有td元素，但最终可能会在以前的td元素上出现重复的处理程序。您可以只将处理程序附加到新元素，也可以将1个处理程序附加到表并使用冒泡来实现您想要的like@frajk谢谢你，伙计。你的解释很有用。正确，谢谢+我投你一票。这已经被问过很多次了。你应该把它作为副本关闭。@FelixKling-我没有随身带着这些东西的书，这里的搜索功能太差了，无法经常查找副本。它应该作为一个副本关闭，并且是，但是作为一个用户，发布这样的东西对我来说更快。我有这个作为指尖知识，它是字面上的2分钟打字，而不是花5确保复制目标是准确的。还要注意的是，即使您在这方面也有问题，因为对于这种情况，您选择的副本不是“规范”或父帖子。回顾你的评论要比回答这个问题花费更长的时间post@FelixKling-梅塔是murder@FelixKling-另请参见：以了解通常是这些的父项。还请注意，您的重复目标包括“这是一个可能的重复”的注释，链接到“请参阅我在此处包含的注释”。