表排序后函数停止工作

Question

我目前有一个通过引导集成的 DataTables 排序的表。在我的最后一列中，我有一个按钮组（编辑、完成等），单击时应该调用函数。

按钮是在 php while 循环中使用此代码创建的，其中 data-id 是 javascript 需要接收的变量

echo "<button type=\"button\" class=\"complete btn btn-default btn-xs\" data-id=\"" . $row["id"] . "\"><span class=\"glyphicon glyphicon-ok\"></span></button>";

Javascript：

$(".complete").click(function() {
    var id = $(this).data("id");
    alert(id);
})

这适用于页面加载，但在我对表格进行排序的那一刻，功能停止工作，没有输出到控制台！关于为什么这不起作用的任何帮助？

编辑：

排序功能

/* Datatables */
$("#tasks").dataTable({
    "aoColumns": [
        null,
        null,
        {"sType": "date-uk"},
        {"bSortable": false}
    ]
});
$.extend($.fn.dataTableExt.oSort, {
    "date-uk-pre": function (a) {
        var ukDatea = a.split("/");
        return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    },
    "date-uk-asc": function (a, b) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
    "date-uk-desc": function (a, b) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
});
/* End */

按钮应该在排序时重新创建，因为数据不是通过 ajax 加载的

Answer 1

您应该将事件委托给表级别：

$("#tasks").on("click",".complete",function() {
    var id = $(this).data("id");
    alert(id);
})