在另一個按鈕的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
});