別のボタンのonclickイベントの後に生成されるボタンのJavascript機能

Question

私はAJAX呼び出しを行うボタンをユーザが押すことができるスクリプトを持っています。呼び出しが完了すると、ボタンは「完了」と「取り消し」という新しいボタンのテキストに置き換えられます。しかし、私はトラブル[元に戻す]ボタンは、そのIDのonclick関数に接続することを持っています

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

：目的は、ユーザは、彼らがちょうどかかった操作を元に戻すことを可能にすることです。実際には、[元に戻す]ボタンをクリックすると何も起きないようです。上記のonclick関数からupdate.append内に生成された元に戻すボタンと関係があるかもしれないと私は信じています。しかし、違う。ここに私の関数は（上記のオリジナルのonclickの関数で追加されました）ID =アンドゥとボタンのUNDOクリックイベントのためにある：

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

私はちょうど私のスクリプトの最初の関数の下にこの関数を置いていないが、何も[元に戻す]ボタンを押すと発生します。テストのために関数内にアラートを追加しても、アラートは表示されません。

ご提案いただければ幸いです。

Answer 1

$("#undo").clickは、要素がDOMに動的に追加されなかった場合にのみ機能します。私はスペンサーの答えは動作しません推測

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

Answer 2

：あなたは、動的に代わりundo使用.onを追加しているので。 Cuzのイベントは、すでに以下の動作しません結合クリックでシンプル

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

Answer 3

を動作するはずのように彼のコードを変更するDOM の要素を既存のために接続する必要があります。以下を使用する必要があります。

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

または

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