jquery - ページの更新後に画像がテーブルから削除され、クリックしても機能がトリガーされない

Question

私はテーブルを持っています。ユーザーが追加ボタンをクリックするたびに、4 つ<td>の要素を持つ新しい行が追加されます。そのうちの 3 つは入力要素で、最後の行は小さなボタンです。追加ボタンをクリックすると完全に機能しますが、小さなボタンをクリックしても何も起こりません。関数をトリガーせず、ページを更新すると、入力要素ではなくボタンが消えます。テーブル行を追加する ajax は次のとおりです。

    var new_period = $("<tr data-pid='" + period.id + "' class='period'>" +
    "<td>Name:</td><td><input class='period_name' type='text'></td>" +
    "<td>Start:</td><td><input class='period_start' type='text'></td>" +
    "<td>End:</td><td><input class='period_end' type='text'></td>" + 
    "<td><a id='remove_periods_btn' href = '#'><img src='/img/x.png'></a></td>" +
    "</tr>");

小さなボタンをクリックするとトリガーされる私のjQuery関数は次のとおりです。

    $("#remove_periods_btn").click(function(e) {
        alert("Working");
        e.preventDefault();
    });

ありがとうございました！