在Jquery DataTable中添加Click函数到两个按钮

Question

I have a jquery datatable with dynamically added buttons for edit and delete as below:

Below is my 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" />';
                 }
             }]
        });

And Below is my code for button click:

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

The above function gets fired when I click Edit or Delete button, what I want is to add another function for delete button so that separate functions are fired when edit and delete is clicked. How can I acheve that?

Answer 1

In this code you have triggered the click event to tr. Instead of triggering event to tr you can trigger click event to specific id. Here you have #btnEdit and #btnDelete

so your code looks like

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

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

Answer 2

I think you want like this

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

Answer 3

It seems like you want to perform the operation on specific row when the button of that row is clicked if that's the case then my suggestion would be access the button by giving the class to it because the approach you're using will generate multiple button with same ids and the html form cannot have elements with same ids.

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" />';
             }
         }]
    });

now you can access the button using the below code:

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

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