jQuery 响应式数据表上的事件不起作用

Question

我有一个 jQuery 事件绑定到数据 table 中的一个元素，当 table 为全角时它会毫无问题地触发。但是，当 table 折叠并且应用数据 tables 响应时，事件不会触发。控制台中没有关于任何错误的任何信息。

您可以在此处查看下面的代码并在 jsfiddle 上试用它：

点击垃圾桶，您会看到一个弹出窗口。调整页面大小直到 table 折叠。打开该列以显示垃圾桶，当您单击它时没有任何反应。

有什么想法吗？

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">

<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/tabletools/2.2.3/css/dataTables.tableTools.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/responsive/1.0.6/css/dataTables.responsive.css">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/tabletools/2.2.3/js/dataTables.tableTools.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/responsive/1.0.6/js/dataTables.responsive.min.js"></script>

<script>
$(document).ready(function() {

// load data tables if element found
if (document.getElementById('data-table')) {
    $('#data-table').DataTable({
        "responsive": true,
        "paging":   true,
        "searching": true,
        "ordering": false,
        "info":     false
    } );
}

$(".deleteMe").bind('click', function () { 

    var dataString = $(this).attr('data');

    alert(dataString);
});

});

</script>
</head>
<body>

<table width="100%" id="data-table" class="display dataTable">
<thead>
<tr>
<th>Col</th>
<th>Col</th>
<th>Col</th>
<th>Col</th>
<th>Col</th>
<th width="10%">Actions</th>
</tr>
</thead>
<tbody>
<tr>
    <td>asfas</td>
    <td align="middle">fgfg</td>
    <td align="middle">COMPLETED</td>
    <td align="middle">4</td>
    <td align="middle">4</td>
    <td width="10%">
        <a href="#">
            <i alt="Delete" class="fa fa-trash fa-lg deleteMe" id="questionDelete" data="some text 1"></i>
        </a>
    </td>
</tr>
<tr>
    <td>sdfs</td>
    <td align="middle">test</td>
    <td align="middle">2014-02-28</td>
    <td align="middle">1</td>
    <td align="middle">0</td>
    <td width="10%">
        <a href="#">
            <i alt="Delete" class="fa fa-trash fa-lg deleteMe" id="questionDelete" data="some text 2"></i>
        </a>
    </td>
</tr>
<tr>
    <td>sfdsf</td>
    <td align="middle">fgfg</td>
    <td align="middle">COMPLETED</td>
    <td align="middle">4</td>
    <td align="middle">4</td>
    <td width="10%">
        <a href="#">
            <i alt="Delete" class="fa fa-trash fa-lg deleteMe" id="questionDelete" data="some text 3"></i>
        </a>
    </td>
</tr>
</tbody>
</table>

</body>
</html>

Answer 1

我建议改用 .on，并将 click 函数和 data 属性附加到 <a> 而不是 <i>，如下所示：

DEMO HERE

每行的最后一列将变为

<td width="10%">
    <a href="#" class="deleteMe" data="some text 1">
        <i alt="Delete" class="fa fa-trash fa-lg" id="questionDelete" ></i>
    </a>
</td>

与 demo

中的其他列相同

删除的 JS 为：

$(".dataTable").on('click','.deleteMe', function () { 
    var dataString = $(this).attr('data');
    alert(dataString);
});

Answer 2

这不起作用的原因是数据tables 每次被要求调整大小、分页或简而言之呈现某些内容时都会触发一个 "fnDraw" 事件。

您的 "deleteMe" 元素最初在首次呈现时绑定到 table，但是当您的 table 调整大小时 $(".deleteMe").bind('click', function () { } 不会被调用。

幸运的是，您可以绑定一个事件侦听器，它会在每次要求重绘 table 时触发：

if (document.getElementById('data-table')) {
  $('#data-table').DataTable({
     "responsive": true,
     "paging":   true,
     "searching": true,
     "ordering": false,
     "info":     false,
     //add a listener to fire when redrawn:
     "fnDrawCallback" : function(oSettings) {
        setDeleteMeEvent()
     }
   });
}

function setDeleteMeEvent() {
  //Ensure that prior event is take off the DOM
  $(".deleteMe").unbind('click')
  $(".deleteMe").bind('click', function () { 
  var dataString = $(this).attr('data');
  alert(dataString);
}

您必须解除绑定之前的点击事件，否则会发生意想不到的事情。多个事件处理程序可能会堆叠在 dom 上，导致您的点击事件在每次重绘时触发一次。

记录了有关（明显更新的）绘制回调的更多信息：https://datatables.net/reference/option/drawCallback

另请注意，@Guruprasad 的答案有效，因为您将点击事件绑定到整个 table 本身。

我已经在此处更新了您的 fiddle：http://jsfiddle.net/eggmatters/891mdyvy/16/

Answer 3

对我来说，我刚给了 .table-responsive class 一个 200px 的 min-height，效果很棒。

componentDidMount(){
    this._isMounted = true

      $('.table-responsive').css( "min-height", "200px" );
  }

jQuery 响应式数据表上的事件不起作用

jQuery events on responsive datatables not working

jquery

response

datatables