Question

这是问题的html，问题基本上是当我点击数据表的第一页上的userimage类然后它工作正常但是当我点击数据表的第二页然后偶数没有被触发。

<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>

这是触发click事件的userimage类。

          <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>

这是JavaScript代码。

<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

这种情况正在发生，因为该元素不在DOM中。当您使用数据表切换页面时，它会创建元素。要在数据表中的元素上添加事件，您需要创建如下事件：

$("#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);
});

这会将事件绑定到表，但在单击图像类时会运行该函数。

Jquery不在数据表的第二页上工作

1 个答案: