Class 基于点击事件在 10 行后无响应 - 数据表

Question

我有一个 Table 这样的：

<?php 
    foreach($cars->result() as $car){
    echo '<tr>';
    echo '<td id="'.$car->car_id.'_id">'.$car->car_id.'</td>';
    echo '<td id="'.$car->car_id.'_nm">'.$car->car_name.'</td>';
    echo '<td id="'.$car->car_id.'_ph">'.$car->rate_per_hr.'</td>';
    echo '<td id="'.$car->car_id.'_pk">'.$car->rate_per_km.'</td>';
    echo '<td id="'.$car->car_id.'_mh">'.$car->min_hrs.'</td>';
    echo '<td><a href="#" id="ed_'.$car->car_id.'" class="car_edit"><span class="glyphicon glyphicon-edit"></span></a></td>';
    echo '<td><a href="#" id="de_'.$car->car_id.'" class="car_delete"><span class="glyphicon glyphicon-remove"></span></a></td>';
    echo '</tr>';
    }
    ?>

我正在使用 DataTables 来显示数据网格。

现在，我为每一行设置了一个编辑按钮，它具有相同的 class 但单独的 ID，如上面的代码所示。基于对 class 的点击，我正在提取 ID，然后进行一些 ajax 操作。

为简单起见编辑了代码

 $('.car_edit').click(function(e){
  e.preventDefault();
  var id= $(this).attr('id');
  var len = id.length;
  var row_id = id.substr(3 , len);
  console.log(row_id);
});

现在，这对于前 10 行（数据的默认显示Tables）工作得很好，之后不会触发点击事件。

我正在考虑这个问题。请帮我指出我的错误。谢谢。

Answer 1

尝试 jquery on():

$(function(){
   $(document).on('click','.car_edit',function(event){
       event.preventDefault();
       var id= $(this).attr('id');
       var len = id.length;
       var row_id = id.substr(3 , len);
       console.log(row_id);
   });
});

根据文档：Attach an event handler function for one or more events to the selected elements https://api.jquery.com/on/

Class 基于点击事件在 10 行后无响应 - 数据表

Class Based Click Event Irresponsive after 10 Rows - Datatables

javascript

php

datatable

jquery