JQuery datatables : getting row data on button click, but script just run on page 1

Question

I read this code and i am using it right now.

jQuery: Get the contents of a table row with a button click

All running well, but just on 1st page of datatables. When i move to 2nd and other pages, the script just not run. What i miss ?

Here is my code :

<script type="text/javascript" charset="utf-8">
 $(document).ready(function() {
  $('#invoicedtls').DataTable({
   "pageLength" : 8,
   "lengthMenu" : [ 8, 16, 32, 64, 100 ],
   select : true
  });

  $('#invoicepayments').DataTable({
   "pageLength" : 8,
   "lengthMenu" : [ 8, 16, 32, 64, 100 ],
   select : true
  });

  $('#existingcustomer').DataTable({
   "pageLength" : 8,
   "lengthMenu" : [ 8, 16, 32, 64, 100 ],
   select : true
  });

  $(".use-address").click(function () {
     var id = $(this).closest("tr").find(".nr").text();
     alert(id);
   });

And here my jsp code :

<!-- Modal -->
<div class="modal fade" id="modalExistingCustomer" tabindex="-1"
 role="dialog" aria-labelledby="modalExistingCustomerLabel">
 <div class="modal-dialog modal-lg">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"
     aria-label="Close">
     <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title" id="modalExistingCustomerLabel">Select
     Existing Customer</h4>
   </div>
   <div class="modal-body">
    <!--   <table class="table table-striped table-hover">  -->
    <table id="existingcustomer" class="display compact">
     <thead>
      <tr>
       <th>ID</th>
       <th>Name</th>
       <th>Sex</th>
       <th>Origin</th>
       <th>Religion</th>
       <th>Option</th>
      </tr>
     </thead>
     <tbody>
      <c:forEach var="customer" items="${listCustomer}">
       <tr>
        <td class="nr">${customer.id}</td>
        <td>${customer.firstName}</td>
        <td>${customer.sex}</td>
        <td>${customer.msLocation.name}</td>
        <td>${customer.msReligion.name}</td>
        <td>
         <button class="btn btn-link btn-xs use-address">Use</button>
        </td>
       </tr>
      </c:forEach>
     </tbody>
    </table>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default pull-left"
     data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Select
     Customer</button>
   </div>
  </div>
 </div>
</div>

Thank You

score 1 · Accepted Answer · answered Nov 18 '15 at 01:57

Replace this:

$(".use-address").click(function () {
              var id = $(this).closest("tr").find(".nr").text();
              alert(id);
            });

with:

$("body").on("click", ".use-address", function () {
              var id = $(this).closest("tr").find(".nr").text();
              alert(id);
            });

JQuery datatables : getting row data on button click, but script just run on page 1

1 Answers1