在另一个按钮的onclick事件之后生成的按钮上的Javascript函数

Question

我有一个脚本，用户可以在其中按下一个按钮来进行AJAX调用。 通话完成后，该按钮将替换为“ Complete”和“ Undo”新按钮。 目的是允许用户撤消刚刚执行的操作：

<script type="text/javascript">
$('button').on('click', function() {
      ajax call 
      });
update.append('Complete<button type=\"button\" id=\"undo\">Undo</button>');
        $(this).remove();
    });
    </script>

但是，我无法使“撤消”按钮连接到该ID的onclick函数。 实际上，当我单击“撤消”按钮时似乎什么也没有发生。.我认为这可能与在update.append中从上方的onclick函数生成的撤消按钮有关。.但是，我在理解发生的事情时遇到了麻烦错误。 这是我的id = undo（在上面的原始onclick函数中添加的）按钮的undo click事件的函数：

$("#undo").click(function() {
        ajax call
     });

我将此函数放在脚本中第一个函数的下面，但是当我按下“撤消”按钮时，什么也没有发生。 即使我在测试功能中添加了警报，该警报也不会显示。

任何建议将不胜感激。

Answer 1

$("#undo").click仅在未将元素动态添加到DOM时才起作用。 由于要动态添加undo改用.on ：

$('body').on('click', '#undo', function() {
    ajax call
});

Answer 2

我猜斯宾塞的答案行不通。 Cuz事件应附加到DOM中已存在的元素上，以修改其代码，如下所示

$("body").on('click', '#undo', function() {
    ajax call
});

Answer 3

简单的单击绑定将不起作用。 您必须使用以下内容。

$("body").on('click', '#undo', function() {
    ajax call
});

要么

$(document).on('click', '#undo', function() {
    ajax call
});