Question

我目前有一个表，按DataTables排序，并带有bootstrap集成。在我的最后一栏中，我有一个按钮组（编辑，完成等），应该在点击时调用函数。

按钮是在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);
})

表排序后，函数停止工作

1 个答案: