wil*_*sdb 5 jquery response datatables
我有一个绑定到数据表中的元素的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>
Gur*_*Rao 12
我建议使用.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 for delete将是:
$(".dataTable").on('click','.deleteMe', function () {
var dataString = $(this).attr('data');
alert(dataString);
});