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()方法文档：

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。

参见＆＃34;直接和委派活动＆＃34;在jQuery on()方法文档和jQuery DataTables – Why click event handler does not work中获取更多信息。

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

1 个答案: