title: Why is Jquery not opening dialog from subsequent datable pages?
body: <p>I have a list of over 3000 items populated into a table and paginated</p>
  <pre><code>       @foreach ($programs as $program)
                                          &lt;tr&gt;
                                              &lt;td&gt;{{ $program-&gt;id }}&lt;/td&gt;
                                              &lt;td&gt;
                                                  @if ($program-&gt;module == 'dmodule')
                                                      Direct Training Module
                                                  @elseif ($program-&gt;module == 'emodule')
                                                      Equivalence Module
                                                  @elseif ($program-&gt;module == 'gmodule')
                                                      Generalization Module
                                                  @else
                                                      Transformation Module
                                                  @endif
                                              &lt;/td&gt;
                                              &lt;td&gt;
                                                  {{ $program-&gt;title }}
                                              &lt;/td&gt;
                                              &lt;td&gt;
                                                  &lt;div class=&quot;col-md-6&quot;&gt;
                                                      &lt;button type=&quot;button&quot; class=&quot;btn btn-md programDetails&quot;
                                                          data-id=&quot;{{ $program-&gt;id }}&quot;&gt;
                                                          &lt;i class=&quot;fa fa-file&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
                                                      &lt;/button&gt;
                                                  &lt;/div&gt;
                                              &lt;/td&gt;
                                              &lt;td&gt;
                                                  &lt;div class=&quot;col-md-6&quot;&gt;
                                                      &lt;a href=&quot;{{ $program-&gt;video_link }}&quot; class=&quot;btn btn-md&quot;&gt;&lt;i
                                                              class=&quot;fa fa-video&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                                                  &lt;/div&gt;
                                              &lt;/td&gt;
                                              &lt;td&gt;
                                                  &lt;div class=&quot;col-md-6&quot;&gt;
                                                      &lt;a href=&quot;{{ route('program.print', $program-&gt;id) }}&quot;
                                                          class=&quot;btn btn-md&quot;&gt;&lt;i class=&quot;fa fa-print&quot;
                                                              aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                                                  &lt;/div&gt;
                                              &lt;/td&gt;
                                              &lt;td&gt;
                                                  &lt;div class=&quot;row&quot;&gt;
                                                      &lt;div class=&quot;col-md-4&quot;&gt;
                                                          @if ($client-&gt;hasProgram($program-&gt;id))
                                                          @else
                                                          &lt;button type=&quot;button&quot; class=&quot;btn btn-xs btn-success programAttachment&quot;
                                                          data-id=&quot;{{ $program-&gt;id }}&quot; data-filter=&quot;{{ $client-&gt;id }}&quot; &gt;
                                                          &lt;i class=&quot;fa fa-plus&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
                                                      &lt;/button&gt;
                                                          @endif
                                                      &lt;/div&gt;
                                                      &lt;div class=&quot;col-md-4&quot;&gt;
                                                          &lt;a href=&quot;{{ route('programs.edit', $program-&gt;id) }}&quot;
                                                              class=&quot;btn btn-xs btn-warning&quot; data-toggle=&quot;tooltip&quot;
                                                              data-placement=&quot;top&quot; title=&quot;Edit&quot;&gt;&lt;i class=&quot;fa fa-pen&quot;
                                                                  aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                                                      &lt;/div&gt;
                                                      &lt;div class=&quot;col-md-4&quot;&gt;
                                                          &lt;form action=&quot;{{ route('programs.destroy', $program-&gt;id) }}&quot;
                                                              method=&quot;POST&quot; class=&quot;form-inline&quot;&gt;
                                                              &lt;button class=&quot;btn-danger btn-xs&quot; data-toggle=&quot;tooltip&quot;
                                                                  data-placement=&quot;top&quot; title=&quot;Delete&quot;&gt;&lt;i
                                                                      class=&quot;fa fa-trash&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                                                              {{ method_field('DELETE') }}
                                                              {{ csrf_field() }}
                                                          &lt;/form&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
  
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                      @endforeach
  </code></pre>
  <p>In the table I have button that is used to show a dialog with more information about the programs. This buttons event is handled by javascript code as follows</p>
  <pre><code>       $(document).ready(function() {
  
          $('.programDetails').on('click',function() {
  
              var progid = $(this).data('id');
              var CSRF_TOKEN = $('meta[name=&quot;csrf-token&quot;]').attr('content');
              // AJAX request
              $.ajax({
                  url: '/carriculumbank/program',
                  type: 'post',
                  data: {
                      _token: CSRF_TOKEN,
                      progid: progid
                  },
                  success: function(response) {
                      // Add response in Modal body
                      $('.modal-content').html(response);
                      $(&quot;.modal-dialog&quot;).css(&quot;width&quot;, &quot;90%&quot;);
                      // Display Modal
                      $('#programModal').modal('show');
                  }
              });
          });
      })
  </code></pre>
  <p>Now my problem is that this works only on the first page but not for any of the subsequent pages.
  What could be the issue and how can I solve it?</p>