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

【问题标题】：jQuery events on responsive datatables not working响应式数据表上的 jQuery 事件不起作用
【发布时间】：2015-05-14 13:15:00
【问题描述】：

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

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

Js-Fiddle Here

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

有什么想法吗？

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

【问题讨论】：

仅供参考，这不是有效的 HTML 标记，ID 在文档上下文中必须是唯一的

标签： jquery datatables response

【解决方案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);
});

【讨论】：

感谢@Guruprasad Rao，这似乎有效，但我不明白为什么。你能解释为什么吗？谢谢。
虽然不确定，但由于 DOM 中的控制位置发生了变化，它可能无法找到它。我觉得这就是原因。
jquery 调用上的数据表可以放大所有内容。进行本身不能的宽度声明或不通过 API 添加/删除会导致调整大小时发生奇怪的情况。
这是一个巨大的帮助。我是用角度来做这个的，所以把它放在一个指令中，并在链接函数中访问我的控制器来调用它的函数。
之所以有效，是因为当数据表将数据放入子行时，它不是通过获取 DOM 元素来实现的，而是通过从单元格中抓取原始 HTML 来实现的。由于 HTML 不携带侦听器，因此按钮是重复的，但侦听器不是。将侦听器附加到表可以回避这个问题，因为表始终存在。

【解决方案2】：

这不起作用的原因是，每次要求数据表调整大小、分页或简而言之，渲染某些内容时，都会触发“fnDraw”事件。

您的“deleteMe”元素最初在第一次呈现时绑定到表格，但在调整表格大小时不会调用$(".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 上，导致每次重绘时触发一次 click 事件。

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

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

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

【讨论】：

你的小提琴代码有一个错误。当列折叠以进行响应式显示时，该事件不会触发。

【解决方案3】：

对我来说，我刚刚给 .table-responsive 类设置了 200 像素的最小高度，效果非常好。

componentDidMount(){
    this._isMounted = true

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

【讨论】：