Add Click Function To Two Buttons Inside Jquery DataTable

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