Jquery Not working on the second page of the datatable

Question

This is the html for the question, issue is basically when i click on the userimage class on the first page of the datatable then it works fine but when i click on the second page of the datatable then the even is not fired.

<table class="table" id="example1">
  <thead>
    <tr>
      <th>S.No.</th>
      <th>Name</th>
      <th>Email</th>
      <th>Contact</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <?php 
      $i = 0;
      foreach($users as $user){
        $i++;
        $id = $user['id'];
        $btn_class = ($user['status'] ==1 ? "btn btn-success" : "btn btn-warning");
        $url_attribute = ($user['status'] ==1 ? "user-disable" : "user-enable");
        $btn_text = ($user['status'] ==1 ? "Disable" : "Enable");
        $picture = $_SERVER['DOCUMENT_ROOT']. "/temp/assets/images/user_profile/". $user['image'];
        $user_profile_pic = (file_exists($picture) && $user['image'] != "" ? base_url()."/temp/assets/images/user_profile/". $user['image'] : ($user['social_image'] ? $user['social_image'] : ""));
        ?>
        <tr>
          <td><?= $i;?></td>

This is the userimage class on which click event is fired.

          <td <?php if($user_profile_pic != ""){ ?> class="userimage" data-userimage="<?= $user_profile_pic;?>">
            <a data-toggle="modal" data-target="#myModal" href="" <?php } ?>>
            <?= ($user['fulname'] ? $user['fulname'] : "N/A"); ?></a>
          </td>
          <td><?= ($user['email'] ? $user['email'] : "N/A");?></td>
          <td><?= ($user['contact'] ? $user['contact'] : "N/A");?></td>
          <td>
            <a href="<?= base_url().'admin/user-view/'.$id;?>" class="btn btn-info">View Detail</a>
            <a href="<?= base_url().'admin/user-delete/'.$id;?>" class="btn btn-danger" onclick="return confirm_delete();">Delete</a>
            <a href="<?= base_url().'admin/'.$url_attribute.'/'.$id;?>" class="<?= $btn_class;?>"><?= $btn_text;?></a>      
          </td>
        </tr>
      <?php 
      } 
    ?>
  </tbody>
</table>

This is the JavaScript code.

<script type="text/javascript">
  function confirm_delete(){
    var x = confirm("Are You Sure, you want to delete this User ?");
    if(x){
      return true;
    }else{
      return false;
    }
  }

  $("#example1").DataTable();

  $(".userimage").click(function(){
    var image = $(this).attr('data-userimage');
    var name = $(this).text().toUpperCase();
    $("#image").show();
    $("#image").attr('src',image);
    $("#fulname").text(name);
  })
</script>

Answer 1

This is happening because the element isn't in the DOM. When you switch page with datatables it creates the elements. To add events on elements in datatables you need to create an event like this:

$("#example1").on("click", ".userimage", function(event) {
    var image = $(this).attr('data-userimage');
    var name = $(this).text().toUpperCase();
    $("#image").show();
    $("#image").attr('src',image);
    $("#fulname").text(name);
});

This binds an event to the table but runs the function when the image class is clicked.