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

我有一個jQuery事件綁定到數據表中的一個元素，當表是全寬度時，它沒有問題觸發。但是，當表被摺疊並且應用數據表響應時，事件不會觸發。控制檯中沒有任何關於任何錯誤的信息。響應式數據表上的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>

來源

2015-05-14 williamsdb

僅供參考，這是無效的HTML標記，ID必須在文檔方面獨特 –

我會建議使用.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進行刪除是：

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

來源

2015-05-14 13:26:38

感謝@Guruprasad饒，似乎工作，但我不明白爲什麼。你能解釋爲什麼嗎？謝謝。 – williamsdb

即使我不確定，但由於DOM中控件的位置發生變化，它可能無法找到它。我覺得這是原因。 –

jquery調用的數據表大小一切提高。做寬度聲明，它本身不能或不通過API添加/刪除會導致調整大小的奇怪。 – Richard

之所以這樣行不通，是因爲數據表，每次觸發一個「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上，導致您的點擊事件在每次重繪時觸發一次。

的更多信息（一個明顯的更新）繪製回調記載：https://datatables.net/reference/option/drawCallback

還要注意的是@古魯普拉薩德的答案的作品，因爲你要綁定一個click事件對整個表本身。

我已經更新了你的提琴在這裏：http://jsfiddle.net/eggmatters/891mdyvy/16/

來源

2016-09-28 18:35:57 eggmatters

你小提琴代碼有一個錯誤。該列在摺疊以響應顯示時不會觸發。 – Corey

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

回答

相關問題