title: DataTable select won't fire for second time
body: <p>I have 2 tables in my view where I select a row from <code>table1</code> and data return in <code>table2</code></p>
  
  <p>The problem is when i select second row it won't send ajax request while i can see click being triggered .</p>
  
  <h1>Screenshots</h1>
  
  <p><code>view</code></p>
  
  <p><a href="https://i.stack.imgur.com/kei3m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kei3m.png" alt="one"></a></p>
  
  <p><code>results</code></p>
  
  <p><a href="https://i.stack.imgur.com/kRL3p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kRL3p.png" alt="two"></a></p>
  
  <h1>Code</h1>
  
  <p><code>script</code></p>
  
  <pre><code>&lt;script&gt;
      $(function(){
          // table 1
          $('.data_table').DataTable({
              processing: true,
              select    : true,
              language: {
                  processing: '&lt;span&gt;Processing...&lt;/span&gt;',
              },
              serverSide: true,
              ajax: '{{ route('schoolsIndexData') }}',
              columns: [
                  { data: 'photo' },
                  { data: 'name' },
                  { data: 'type' },
              ],
              "order": [[ 0, "desc" ]],
              dom: 'Bfrtip',
              buttons: [
                  {
                      extend: 'copy',
                      exportOptions: {
                          columns: [ 0, ':visible' ]
                      }
                  },
                  {
                      extend: 'excel',
                      exportOptions: {
                          columns: ':visible'
                      }
                  },
                  {
                      extend: 'csv',
                      exportOptions: {
                          columns: ':visible'
                      }
                  },
                  {
                      extend: 'pdfHtml5',
                      exportOptions: {
                          columns: [ 2, 3, 1 ]
                      }
                  },
                  {
                      extend: 'print',
                      exportOptions: {
                          columns: ':visible'
                      }
                  },
                  'colvis'
              ]
          });
  
          // table 2
          $('.data_table tbody').on('click', 'tr', function (e) {
              e.preventDefault();
  
              var schoolId = $(this).attr('id');
  
              $('#teachers').DataTable({
                  processing: true,
                  destroy: true,
                  retrieve:true,
                  language: {
                      processing: '&lt;span&gt;Processing...&lt;/span&gt;',
                  },
                  ajax: {
                      url: '{{url('dashboard/teacherIndexData')}}/'+schoolId,
                      type: "GET",
                      cache: true
                  },
                  columns: [
                      { data: 'id' },
                      { data: 'photo' },
                      { data: 'name' },
                      { data: 'action', orderable: false, searchable: false },
                  ],
                  "order": [[ 0, "desc" ]],
                  dom: 'Bfrtip',
                  buttons: [
                      {
                          extend: 'copy',
                          exportOptions: {
                              columns: [ 0, ':visible' ]
                          }
                      },
                      {
                          extend: 'excel',
                          exportOptions: {
                              columns: ':visible'
                          }
                      },
                      {
                          extend: 'csv',
                          exportOptions: {
                              columns: ':visible'
                          }
                      },
                      {
                          extend: 'pdfHtml5',
                          exportOptions: {
                              columns: [ 2, 3, 1 ]
                          }
                      },
                      {
                          extend: 'print',
                          exportOptions: {
                              columns: ':visible'
                          }
                      },
                      'colvis'
                  ]
              });
              console.log(schoolId);  // result of this log is in screenshots above
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <h1>Question</h1>
  
  <p>Why can't I get my next clicks to send request to back-end? what should I do to fix this?</p>
  
  <h1>Update</h1>
  
  <p><a href="https://jsfiddle.net/robertnicjoo/dp78g56c/2/" rel="nofollow noreferrer">Sample code</a></p>