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

Answer 1

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