響應式數據表上的 jQuery 事件不起作用

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> ，如下所示：

演示在這里

每行的最后一列將更改為

<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 將是：

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

Answer 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/

Answer 3

對我來說，我只是給了 .table-responsive 類一個 200px 的最小高度，它工作得很棒。

componentDidMount(){
    this._isMounted = true

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

響應式數據表上的 jQuery 事件不起作用

問題描述

3 個解決方案

解決方案1
18 已采納 2015-05-14 13:26:38

解決方案2
1 2016-09-28 18:35:57

解決方案3
0 2020-09-22 11:40:36

響應式數據表上的 jQuery 事件不起作用

問題描述

3 個解決方案

解決方案1 18 已采納 2015-05-14 13:26:38

解決方案2 1 2016-09-28 18:35:57

解決方案3 0 2020-09-22 11:40:36

解決方案1
18 已采納 2015-05-14 13:26:38

解決方案2
1 2016-09-28 18:35:57

解決方案3
0 2020-09-22 11:40:36