CODEWITHSUNDEEP
javascriptjqueryhtmldatatable
Eli
Eli

Reputation: 1276

Anchor tag value is empty in next page of datatable pagination

I am having trouble with getting the anchor tag value of the next set of data in a pagination. Note that I successfully fetched the anchor tag value in the first page of a datatable pagination but when I click the second page, javascript alert message ain't shpwing up anymore. What is the problem of this? Please help. Here are my codes. Thanks.

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);
 });

When I click any of these, an alert shown with an id value on it, but when I turn in the second page of pagination, no more alert shown. enter image description here

Upvotes: 0

Views: 219

Answers (1)

User863
User863

Reputation: 20039

This is because the datatable adds the row dynamically on pagination.

Try jquery's Event Delegation

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

Upvotes: 1

Related Questions