jQuery单击事件不在表的第二页上工作

Question

我有一个使用bootstrap和分页的表。在此表中，我有一个包含删除按钮的Action列。我正在使用jQuery click事件来执行操作。在表的第一页中，它正常运行，但是当我转到第二页时，此功能无效。以下是我的代码。

<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>