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

【问题标题】：Javascript function on a button generated after an onclick event of another button在另一个按钮的 onclick 事件后生成的按钮上的 Javascript 函数
【发布时间】：2016-07-11 13:59:39
【问题描述】：

我有一个脚本，用户可以在其中按下进行 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 按钮的 undo click 事件函数（在上面的原始 onclick 函数中添加）：

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

我将此函数放在脚本中第一个函数的下方，但是当我按下撤消按钮时没有任何反应。即使我在函数中添加了一个警报进行测试，警报也不会显示。

任何建议将不胜感激。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

$("#undo").click 仅在元素未动态添加到 DOM 时才有效。由于您是动态添加undo，请改用.on：

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

【讨论】：

我猜应该使用update.on 而不是麻烦整个document 进行委派..

【解决方案2】：

我猜斯宾塞的回答是行不通的。 Cuz 事件应该附加到 DOM 中已经存在的元素像下面这样修改他的代码应该可以工作

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

【讨论】：

【解决方案3】：

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

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

或

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

【讨论】：