jQuery DataTables – Why click event handler does not work (Problem)

Example for article at https://www.gyrocode.com/articles/jquery-datatables-why-click-event-handler-does-not-work/

by gyrocode

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/bs4-4.1.1/dt-1.10.18/datatables.min.css">
<script src="https://cdn.datatables.net/v/bs4-4.1.1/dt-1.10.18/datatables.min.js"></script>
<div class="container">
    <h4>
       <a href="https://www.gyrocode.com/articles/jquery-datatables-why-click-event-handler-does-not-work/">jQuery DataTables – Why click event handler does not work</a><br>
       <small>Problem</small>
    </h4>
    <hr>

   <table id="example" class="table table-striped table-bordered" style="width:100%">
       <thead>
           <tr>
               <th>Name</th>
               <th>Position</th>
               <th>Office</th>
               <th>Extn.</th>
               <th>Start date</th>
               <th>Salary</th>
               <th></th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td>Tiger Nixon</td>
               <td>System Architect</td>
               <td>Edinburgh</td>
               <td>61</td>
               <td>2011/04/25</td>
               <td>$320,800</td>
               <td></td>
           </tr>
           <tr>
               <td>Garrett Winters</td>
               <td>Accountant</td>
               <td>Tokyo</td>
               <td>63</td>
               <td>2011/07/25</td>
               <td>$170,750</td>
               <td></td>
           </tr>
           <tr>
               <td>Ashton Cox</td>
               <td>Junior Technical Author</td>
               <td>San Francisco</td>
               <td>66</td>
               <td>2009/01/12</td>
               <td>$86,000</td>
               <td></td>
           </tr>
           <tr>
               <td>Bradley Greer</td>
               <td>Software Engineer</td>
               <td>London</td>
               <td>41</td>
               <td>2012/10/13</td>
               <td>$132,000</td>
               <td></td>
           </tr>
           <tr>
               <td>Dai Rios</td>
               <td>Personnel Lead</td>
              ...

JavaScript

$(document).ready(function (){
   var table = $('#example').DataTable({
      'columnDefs': [
         {
            'targets': 6,
            'data': null,
            'searchable': false,
            'orderable': false,
            'defaultContent': '<button type="button" class="btn btn-primary btn-edit">Edit</button>'
         }
      ]
   });
   
   // Handle click on "Edit" button
   // NOTE: Doesn't work on pages other than first
   $('#example .btn-edit').on('click', function(){
      // Reset form
      $('#form-edit').get(0).reset();
      
      // Store current row
      $('#modal-edit').data('row', $(this).closest('tr'));
      
      // Show dialog
      $('#modal-edit').modal('show');
   });
   
   // Handle modal shown event
   $('#modal-edit').on('shown.bs.modal', function (e){
      // Get row data
      var data = table.row($(this).data('row')).data();
      
      // Set initial data
      $('#edit-name').val(data[0]).focus();
   });

   // Handle form submission event
   $('#form-edit').on('submit', function (e){
      e.preventDefault();
      
      // Hide dialog
      $('#modal-edit').modal('hide');

      // Update table data
      var row = $('#modal-edit').data('row');
      var data = table.row(row).data();
      data[0] = $('#edit-name').val();
      table.row(row).data(data).invalidate();
      
      // Refresh table
      table.draw(false);
   });
});