Question

我有一个脚本，用户可以按下一个进行AJAX调用的按钮。呼叫完成后，按钮将替换为“完成”文本以及名为“撤消”的新按钮。目的是允许用户撤消他们刚刚采取的操作：

<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功能。实际上，当我单击“撤消”按钮时似乎没有任何事情发生..我相信它可能与上面的onclick函数在update.append中生成的撤消按钮有关。但是，我无法理解发生了什么错误。这是我的id = undo按钮的撤销点击事件的功能（在上面的原始onclick函数中添加）：

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

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

3 个答案: