表排序后函数停止工作 [英] Function stops working after table sort

问题描述

我目前有一个表，该表由具有Bootstrap集成的DataTables排序.在我的最后一栏中，我有一个按钮组(编辑，完成等)，单击后应调用函数.

I current have a table that is sorted by DataTables with bootstrap integration. In my final column i have a button group (edit, complete etc) that should call functions when clicked.

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

The buttons are created using this code in a php while loop, with data-id being the variable that the javascript needs to receive

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

JavaScript:

Javascript:

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

这在页面加载时有效，但是当我对表格进行排序的那一刻，这些功能停止工作，并且没有输出到控制台！为什么这不起作用有任何帮助吗?

This works on page load but the minute i sort the table, the functions stop working with no output to console! Any help on why this isn't working?

排序功能

/* 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加载数据

Buttons should be recreated on sort as data is not loaded through ajax

推荐答案

您应将事件委托给表级:

You should delegate event to table level:

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

这篇关于表排序后函数停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！