Javascript jQuery按键不工作

我当前正在尝试在单击按钮后添加文本区域。但是，尽管按钮单击有效，文本区域不注册任何按键事件

注意：这里有一个不同文件的列表，这就是为什么我要在其id上附加一个唯一的id

$(".add").click(function() {
    var id = $(this).attr("id");
    $("#" + id).after("<textarea placeholder = 'Add a description for this piece of work. Press enter to save it.' class = 'edit-work' id = 'edit-work" + id + "'></textarea>");
    $("textarea").not("#edit-work"+id).remove();                     
});

$(".edit-work").on('keypress', function(e) {
    alert('foo');
}); 

$（“.add”）。单击（函数（）{
var id=$（this.attr（“id”）；
$（“#”+id）。在（“”）之后；
$（“textarea”）.not（“#编辑工作”+id）.remove（）；
});
$（“.edit work”）.on（'keypress'，函数（e）{
警报（“foo”）；
}); 

将

按键

侦听器绑定到文本区域时，文本区域不存在。您需要将按键绑定到文档（或现有父级）

有关事件委派的详细信息：

$（“.edit work”）。在（'keypress'，…）

上，将只在当前存在的

.edit work

元素上注册处理程序。如果添加一个新的，它将不会附加处理程序。这就像告诉你所有的员工不要制作任何纸质文档，然后在没有告诉他任何事情的情况下雇佣一个新员工，然后想知道他为什么要用纸张做传统的办公室工作

---

您需要实时处理程序：

$（editWorkSenator）。在（'keypress'、'.edit work'、…）

上，

editWorkSenator

是一个

文档，或者是显示
.edit work
的任何节点（或此类节点的选择器）。这将把处理程序附加到祖先，祖先每次都会检查事件目标是否与提供的实时选择器匹配。
成功了！非常感谢你。我不太明白为什么我的原始代码不起作用。因为当你使用（'keypress'

）上的

$（“.edit work”）.on（'keypress'

）.edit work不存在。如果你在附加后绑定它，这将起作用，或者使用事件委派作为我的示例：）

$(document).on('keypress', ".edit-work", function(e){
    alert('foo');
});