javascript - jQuery 事件范围不起作用

Question

我有一个包含表格的页面，但我想让用户选择将其中一个字段设置为可编辑。

在我的其中一个单元格中

<a class='noteedit'><i class='material-icons blue-text'>edit</i></a>

在我的 JS 中有

$(".noteedit").click(function(){
    obj = $(this).parent().parent(); // get entire row
    cell = $(obj).find("td:eq(1)"); // get current value of cell
    $(obj).find("td:eq(2)").remove(); // remove adjacent cell
    cell.replaceWith("<td><form><input name='noteedit' value='" + cell.text() +"'></td><td><a onclick=\"$(this).parent().parent().find('form').submit();\"  class='noteeditsubmit'><i class='material-icons green-text'>send</i></a><a  class='noteeditcancel'><i class='material-icons grey-text'>cancel</i></a></form></td>") // Change cell to become a form and change adjacent cell be the submit button.
    $(".noteeditcancel").click(function(){
        // Convert cell from <form> to just its original value
        // Change Submit/Cancel icon to original Edit button
    });
});

问题是一旦我将单元格值转换为原始编辑按钮，我就无法再单击该按钮，因为事件绑定(bind)不在范围内。

那么，我该如何解决这个问题并找到比我现在正在做的更好的解决方案。

我的目标是有一个编辑按钮可以将单元格转换为可提交的表单，但也有一个取消按钮可以恢复到原始值

Answer 1

为了扩展 hev1 的答案，此语法允许您在 document 范围内为与您的查询匹配的任何内容创建事件监听器，这就是一切。如果需要，您可以将 document 更改为窄查询。

$(document).on('click', '.noteedit', function(){
    //might as well do the same for your edit button
});
$(document).on('click', '.noteeditcancel', function(){
    // again, any class of 'noteeditcancel' under the scope of document, even if created dynamically, will listen
});