Javascript 单击事件不'；不要在第一页以外的其他页上开火

我正在使用DataTable插件在我的后端页面中显示数据。到目前为止，该插件工作得非常好，除了一种情况：我有一个表显示所有产品。对于表中的每一行，我都有一个链接，用于一个产品的AJAX激活/停用。如果我在第一页，激活/停用工作正常，但当我使用DataTable分页选择另一页时，我无法激活/停用所选产品。它不会在Firebug中显示任何错误，因此我假设链接没有正确显示

以下是我的HTML代码：

<table id="products" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Copy</th>
        <th>Status</th>
        <th>Delete</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Copy</th>
        <th>Status</th>
        <th>Delete</th>
    </tr>
</tfoot>
<tbody>
    <tr>
        <td>1</td>
        <td><a href="http://deals/admin/products/edit/1">Iphone</a></td>
        <td><a href="http://deals/admin/products/copy/1"><span class="glyphicon glyphicon-floppy-disk"></span></a></td>
        <td><a href="#" data-href="1" class="status_product"><span id="span_1" class="glyphicon glyphicon-ok-sign"></span></a></td>
        <td><a href="#" data-href="1" class="delete_product"><span class="glyphicon glyphicon-remove"></span></a></td>
    </tr>
</tbody>

身份证件
名称
复制
地位
删除
身份证件
名称
复制
地位
删除
1.

在HTML代码之后是Javascript：

<script>
$(document).ready(function() {
    $('#products').DataTable();
    $('table#products td a.status_product').click(function() {
        // activate / deactivate
    });
    $('table#delTable tr:odd').css('background',' #FFFFFF');
});
</script>

$（文档）.ready（函数（）{
$（“#产品”）.DataTable（）；
$（'table#products td a.status_product'）。单击（函数（）{
//激活/停用
});
$（'table#delTable tr:odd'）.css（'background'，'#FFFFFF'）；
});

您需要通过提供选择器作为调用中的第二个参数来使用事件委派，请参见下面的示例：

$('table#products').on('click', 'a.status_product', function() {
    // activate / deactivate
});

来自jQuery方法文档：

委派事件的优点是，它们可以从中处理事件 以后添加到文档中的子元素

---

有关更多信息，请参阅jQuery方法文档中的“直接和委派事件”。

您需要通过在调用中提供选择器作为第二个参数来使用事件委派，请参见下面的示例：

$('table#products').on('click', 'a.status_product', function() {
    // activate / deactivate
});

来自jQuery方法文档：

委派事件的优点是，它们可以从中处理事件 以后添加到文档中的子元素

有关更多信息，请参阅jQuery方法文档中的“直接和委派事件”