javascript - 数据表分页的下一页中 anchor 标记值为空

Question

我在获取分页中下一组数据的 anchor 标记值时遇到问题。请注意，我成功地在数据表分页的第一页中获取了 anchor 标记值，但是当我单击第二页时，JavaScript 警报消息不再出现。这有什么问题呢？请帮忙。这是我的代码。谢谢。

bills.php

@foreach ($inactive as $key => $amort)
<tr>
    <td>
       <a href="#" class="btn btn-square btn-success btn-activate-bill " data-value="{{ $amort->id }}" ><i class="nav-icon icon-check"></i> Activate Bill </a>
   </td>
</tr>
@endforeach

Javascript

$(".btn-activate-bill").click(function(e){

      e.preventDefault();

      var amort_id = $(this).data("value");   
      alert(amort_id);
 });

当我单击其中任何一个时，会显示一个带有 id 值的警报，但是当我打开分页的第二页时，不再显示警报。

Answer 1

这是因为数据表在分页时动态添加行。

尝试 jquery 的 Event Delegation

$(document).on('click', '.btn-activate-bill', function(e){
    e.preventDefault();    
    var amort_id = $(this).data("value");   
    alert(amort_id);
});