将单击功能添加到 Jquery DataTable 中的两个按钮答案

【问题标题】：Add Click Function To Two Buttons Inside Jquery DataTable将单击功能添加到 Jquery DataTable 中的两个按钮
【发布时间】：2018-01-30 16:07:36
【问题描述】：

我有一个带有动态添加的编辑和删除按钮的 jquery 数据表，如下所示：

下面是我的 JS：

 ajaxLoadSuccess: function (data) {
     var datatableVariable = $('#articleTable').DataTable({ 
         data: data,
         columns: [
             { 'data': 'Topic' },
             { 'data': 'SubTopic' },
             { 'data': 'Title' },
             //{ 'data': 'ParsedText' },
             {
                 'data': 'AddedOn', 'render': function (date) {
                      var date = new Date(parseInt(date.substr(6)));
                      var month = date.getMonth() + 1;
                      return date.getDate() + "/" + month + "/" + date.getFullYear();
                 }
             },
             { 'data': 'AddedBy' },
             {
                'data': 'Action', 'render': function (data, type, row, meta) {
                 return '<input id="btnEdit" type="button" value="Edit" class="sfBtn sfPrimaryBtn sfLocale" /> <input id="btnDelete" type="button" value="Delete" class="sfBtn sfPrimaryBtn sfLocale" />';
                 }
             }]
        });

下面是我的按钮点击代码：

$("#articleTable tbody").on("click", "tr", function () {
    alert($(this).text());
});

当我单击编辑或删除按钮时，上面的函数被触发，我想要为删除按钮添加另一个函数，以便在单击编辑和删除时触发单独的函数。我怎样才能做到这一点？

【问题讨论】：

标签： javascript jquery ajax datatables

【解决方案1】：

在这段代码中，您触发了 tr 的点击事件。而不是触发事件到 tr 你可以触发点击事件到特定的 id。这里有#btnEdit 和#btnDelete

所以你的代码看起来像

$(document).on('click', '#btnEdit', function () {
    // Do something on edit
});

$(document).on('click', '#btnDelete', function () {
    // Do something on delete
});

【讨论】：

这将始终触发点击第一行，因为按 id 选择将针对 DOM 中具有该 id 的第一个元素。
拥有按钮类而不是 ID
由于编辑和删除按钮对每一行都重复，因此不能为每个按钮设置不同的 ID。使用类将是理想的，并且还可以实现所需的功能。

【解决方案2】：

我想你想要这样

$("#articleTable tbody tr").on("click", "input", function () {
    if ($(this).attr('id') == "btnEdit") {
        fn_edit();
    }
    else {
        fn_delete();
    }
});

【讨论】：

【解决方案3】：

如果是这种情况，您似乎想在单击该行的按钮时对该特定行执行操作，那么我的建议是通过为该按钮提供类来访问该按钮，因为您使用的方法将生成多个具有相同 id 的按钮和 html 表单不能有具有相同 id 的元素。

ajaxLoadSuccess: function (data) {
 var datatableVariable = $('#articleTable').DataTable({ 
     data: data,
     columns: [
         { 'data': 'Topic' },
         { 'data': 'SubTopic' },
         { 'data': 'Title' },
         //{ 'data': 'ParsedText' },
         {
             'data': 'AddedOn', 'render': function (date) {
                  var date = new Date(parseInt(date.substr(6)));
                  var month = date.getMonth() + 1;
                  return date.getDate() + "/" + month + "/" + date.getFullYear();
             }
         },
         { 'data': 'AddedBy' },
         {
            'data': 'Action', 'render': function (data, type, row, meta) {
             return '<input type="button" value="Edit" class="btnEdit sfBtn sfPrimaryBtn sfLocale" /> <input type="button" value="Delete" class="btnDelete sfBtn sfPrimaryBtn sfLocale" />';
             }
         }]
    });

现在您可以使用以下代码访问该按钮：

$("#articleTable tbody").on("click", ".btnEdit", function () {
                alert($(this).text());
            });

$("#articleTable tbody").on("click", ".btnDelete", function () {
                alert($(this).text());
            });

【讨论】：