点击事件不会在第一个以外的页面上触发

Question

我正在使用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>

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

Answer 1

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

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

从jQuery on（）方法文档：

委托事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。

请参阅jQuery on（）方法文档和jQuery DataTables中的 “直接和委托事件” - 为什么单击事件处理程序不能用于更多信息。