jQuery click event not working on second page of the table

Question

I have a table using bootstrap with pagination. In this table I have Action column consisting a delete button. I am using jQuery click event to do the action. In the first page of table, it is functioning normally but when I go to second page, this function is not working. Below are my codes.

<div class="container">
    <div class="body">
        <div class="content">
            <table id="example" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th width="4%">S.N.</th>
                    <th>Name</th>
                    <th>Address</th>
                    <th width="8%">Modified Date</th>
                    <th width="24%">Action</th>
                </tr>
            </thead>
            <tbody>
                <?php 
                $sn = 1;
                foreach ($rows as $result) {
                    ?>
                    <tr id=<?= $result['id'];?>>
                        <td><? echo $sn++; ?></td>
                        <td><? echo $result['name'] ?></td>
                        <td><? echo $result['Address'] ?></td>
                        <td><? echo $result['modified_date'] ?></td>
                        <td>
                            <?php <a href="delete.php?id=<?php $result['id']; ?>" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>Delete</a>?>
                        </td>
                    </tr>
                    <?php } ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $('.btn-danger').on('click', function(event) {
        event.preventDefault();
        alert(2);
    });
});
</script>