Question

我目前正在尝试在点击按钮后添加textarea。但是，虽然按钮单击有效，但textarea不会注册任何按键事件。

注意：有一个不同文件的列表，说明我为其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');
});

Answer 1

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

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

有关事件委派here的更多信息：

Answer 2

$(".edit-work").on('keypress', ...)只会在当前现有的.edit-work元素上注册处理程序。如果添加新的，则不会附加处理程序。这就像告诉所有员工不要出示任何纸质文档，然后雇佣新人而不告诉他任何事情，然后想知道他为什么用纸做传统的办公室工作。

您想要实时处理程序：$(editWorkAncestor).on('keypress', '.edit-work', ...)，editWorkAncestor是document，或者.edit-work将出现的任何节点（或其中一个选择器）。这会将处理程序附加到祖先，每次检查事件目标是否与提供的实时选择器匹配。

jQuery keypress无法正常工作

2 个答案: