圖像會從表頁面刷新後刪除，也可以點擊它不會觸發功能

Question

我有一個表，每次用戶點擊添加按鈕，加上一個新一行，4個<td>元素，其中三個是輸入元素，最後是一個小按鈕。點擊添加按鈕完美地工作，但每當我點擊小按鈕，什麼也沒有發生。它不會觸發函數，並且當我刷新頁面時，按鈕（而不是輸入元素）消失。下面是添加錶行了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(); 
    }); 

謝謝！

Answer 1

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

您只將您的事件處理程序附加到當前在DOM中的元素;如果通過ajax添加它們，則可以將事件處理程序附加到文檔對象，並檢查目標是否是您的元素。

「雪上加霜」的解決方案（主要是jQuery不會是什麼場景，上面的代碼背後）

$(document).click(function(eventObject){ 
    if (eventObject.target.id === 'remove_periods_btn') { 
     alert("Working"); 
     e.preventDefault(); 
    } 
});