0

我有一个表，每次用户单击添加按钮时，它都会添加一个新行，其中包含 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();
    });

谢谢！

4

1 回答 1

2 
$(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();
    }
});
于 2013-04-10T15:13:19.660 回答