Question

我有一个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());
});

当我单击编辑或删除按钮时，上面的函数被触发，我想要的是为删除按钮添加另一个函数，以便在单击编辑和删除时触发单独的函数。我该怎么做呢？

Answer 1

在此代码中，您已将click事件触发为tr。您可以触发click事件到特定ID，而不是触发事件到tr。您有#btnEdit和#btnDelete

所以你的代码看起来像是

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

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

Answer 2

我想你想要这样

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

Answer 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());
            });

将Click函数添加到Jquery DataTable

3 个答案: