Jquery 页面刷新后，图像将从表中删除，单击它也不会触发函数

我有一个表，每次用户单击add按钮，它都会添加一个新行，包含4个

元素，其中三个是输入元素，最后一个是一个小按钮。单击add按钮可以很好地工作，但是每当我单击这个小按钮时，什么都不会发生。它不会触发函数，当我刷新页面时，按钮（而不是输入元素）消失。下面是添加表行的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>");

谢谢大家!

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

您仅将事件处理程序附加到DOM中当前的元素；如果它们是通过ajax添加的，则可以将事件处理程序附加到文档对象，并检查您的元素是否为目标

“更糟糕”的解决方案（基本上是jQuery在幕后为上述代码所做的）

---

id在一个文档中必须是唯一的。另外，jQuery的.click仅将事件绑定到DOM中已经存在的元素–如果以后要添加元素，则必须使用

.on

@CBroe

.on（）

与此问题无关，您可以按任何方式附加事件处理程序（绑定/活动/单击/准备），元素必须存在。是的，但使用

.on

（作为不推荐的

.live

的替代品）元素不必已经存在。你在回答中所做的，就是我真正的意思：-）解决了我一半的问题。谢谢D（没有讽刺）

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

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