Question

我有一个绑定到数据表中的元素的jQuery事件，当表是全宽时，该事件会毫无问题地触发。但是，当表折叠并且应用了数据表响应时，事件不会触发。控制台中没有任何错误。

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

点击垃圾桶然后弹出窗口。调整页面大小，直到表格折叠为止。打开列以显示垃圾桶，当您点击它时没有任何反应。

有什么想法吗？

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

与演示

中的其他列相同

JS for delete将是：

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

Answer 2

这不起作用的原因是因为数据表触发了一个＆＃34; fnDraw＆＃34;事件每次被要求调整大小，分页或简而言之，都会呈现一些东西。

你的＆＃34; deleteMe＆＃34;首次渲染时，元素最初绑定到表，但调整表的大小时不会调用$(".deleteMe").bind('click', function () { }。

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

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的答案有效，因为您将点击事件绑定到整个表格本身。

我在这里更新了你的小提琴：http://jsfiddle.net/eggmatters/891mdyvy/16/

Answer 3

对我来说，我给.table-response类最小高度为200px，它很棒。

componentDidMount(){
    this._isMounted = true

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

响应式数据表上的jQuery事件无法正常工作

3 个答案: