页面刷新后图像从表中删除，同时单击它不会触发功能

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();
    }
});