title: Add Click Function To Two Buttons Inside Jquery DataTable
body: <p>I have a jquery datatable with dynamically added buttons for edit and delete as below:</p>
  
  <p><a href="https://i.stack.imgur.com/wPYXY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/wPYXY.png" alt="Here is my datatable."></a></p>
  
  <p>Below is my JS:</p>
  
  <pre><code> 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 '&lt;input id="btnEdit" type="button" value="Edit" class="sfBtn sfPrimaryBtn sfLocale" /&gt; &lt;input id="btnDelete" type="button" value="Delete" class="sfBtn sfPrimaryBtn sfLocale" /&gt;';
                   }
               }]
          });
  </code></pre>
  
  <p>And Below is my code for button click:</p>
  
  <pre><code>$("#articleTable tbody").on("click", "tr", function () {
      alert($(this).text());
  });
  </code></pre>
  
  <p>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?</p>