JQuery datatables: получение данных строки при нажатии кнопки, но сценарий запускается только на странице 1

Question

Я прочитал этот код, и я использую его прямо сейчас.

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

Все работает хорошо, но только на 1-й странице DataTables. Когда я перехожу на вторую и другие страницы, сценарий просто не запускается. Что я пропустил?

Вот мой код:

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

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

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

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

А вот мой код JSP:

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

Спасибо

Answer 1

Заменить это:

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

с:

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